Question

我有一个固定位置的标题，无论滚动与否，我都想一直呆在那里。这个固定的小标题，内部具有搜索输入。问题是，每当我打开左侧的侧边栏，然后用padding-left：XXXpx推送内容时，此固定容器就会越界。

这是一个小提琴：

.wrapper {
  padding-left: 24px;
  padding-right: 24px;
  background-color: #c3c3c3;
  padding-left: 100px;
}

.header {
  width: 100%;
  background: gray;
  height: 40px;
  position: fixed;
}

.inputText {
  width: 100%;
}

.content {
  background-color: black;
  color: white;
  widows: 100%;
  height: 100vh;
  position: relative;
  top: 40px;
}

<div class="wrapper">
  <div class="header">
    <input class="inputText" type="text" placeholder="Search">
  </div>
  <div class="content">
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
    <span>SOME TEXT</span>
  </div>
</div>

如何在不发生这种情况的情况下获得相同的结果？我可以通过使用以下宽度来解决它：calc（100vw-264px）当我打开它时。但这是一个干净的解决方案吗？

Answer 1

如果您给标题设置left：0 right：0和top：0，它将起作用这里的问题是，您根据包装器设置标题的宽度（100％）但是您要做的是根据页面本身设置宽度

Answer 2

将.wrapper元素设置为具有position:relative和.header元素position:absolute。这样，它将停留在父元素的顶部。还为.header元素设置一个max-width:100%规则。

具有position:fixed元素会弹出文档流，因此它将始终具有width:100%的文档。

用输入来定位固定容器的边界

2 个答案: