时间戳

首页 > 解决方案 > 如何在 React.js 中使用溢出：隐藏以及位置：粘性

javascript - 如何在 React.js 中使用溢出：隐藏以及位置：粘性

问题描述

我一直在尝试使用溢出：隐藏，因为我创建的导航栏似乎在我的网页右侧创建了一个空白。我已经使用 Header 组件来创建导航栏。我还希望导航栏处于位置：粘性。我发现我可以使用其中之一，但不能同时使用两者。有没有办法解决？

标签： javascripthtmlcssreactjsstyling

解决方案

先试试这个。因为你不知道粘性元素和视口边界之间的差距，你可以在你的 css 规则中插入他：

element {
overflow: hidden;
position: sticky;
top: 0; // this will get rid of gap
}

您也可以使用以下。你可能有空间，因为你已经给出了动态宽度，也许你也padding, margin定义了 etc。如果您发布了代码片段，它会有所帮助，但我已经通过以下方式完成了我的样式。flex-root被用作显示器也有帮助。只有在上述方法不起作用时才尝试。

  //  Try CSS attributes:
element {
word-break: break-word;
}

// if you have padding which is creating white space:
element {
width: auto;
padding: 0;
word-break: break-word;
}
// Try this as well
element {
display: flex-root;
}

// display flex guidelines:
// https://developer.mozilla.org/en-US/docs/Web/CSS/display
// The element generates a block element box that establishes a new block formatting 


----------


context, defining where the formatting root lies

推荐阅读