时间戳

首页 > 解决方案 > 我在粘性标题下有 div，但如果它们浮动，标题就不再粘住了

css - 我在粘性标题下有 div，但如果它们浮动，标题就不再粘住了

问题描述

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

这是我的代码

#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 列设计。它只是格式化宽度并使用特定类浮动任何内容。

标签： css

解决方案

使用后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>

推荐阅读