Question

我发现浮动元素是导致问题的原因。

这是我的代码

#header {
  position: sticky;
}

#main {
  width: 100%;
}

#content {
  width: 50%;
  float: left;
  height: 800px;
  box-sizing: border-box;
  border: solid red;
}

<body>
  <h1 id="header">Header</h1>
  <div id="main">
    <p id="content">words</p>
    <p id="content">words</p>
  </div>
</body>

在我的网站上，如果相关，我正在使用W3的RWD色谱柱设计。它只是格式化宽度并使用特定类浮动任何内容。

Answer 1

使用float后，您必须使用clear

body {
  height: 100%;
}

#header {
  position: sticky;
  top: 0;
}

#main {
  width: 100%;
}

#content {
  width: 50%;
  float: left;
  height: 800px;
  box-sizing: border-box;
  border: solid red;
}

.clear-fix {
  clear: both;
}

<body>
  <h1 id="header">Header</h1>
  <div id="main">
    <p id="content">words</p>
    <p id="content">words</p>
    <div class="clear-fix"></div>
  </div>
</body>

我在粘性标头下有div，但如果它们浮动，则标头不再粘住

1 个答案: