Question

我觉得这是一个非常愚蠢的问题，但是我读到的所有内容都无法理解如何使用它。我想要一个包含两个div的非常基本的页面。顶部是整体信息，底部是所有数据。当数据长于页面且用户滚动时，我希望顶部div向下浮动。我可以通过使用position: fixed和top: 0来实现这一点，但是第一个div并不会降低第二个。

我当然可以将margin-top添加到数据div中，但是我也希望能够打开/关闭顶部的div。当我执行此操作（将其关闭）时，margin-top仍然存在，因此显然有点不合常规。

如何保持顶部浮动div并将其他所有内容向下推？

这是一个示例，展示了我所苦苦挣扎的基本知识：

https://jsfiddle.net/vxf5dh7j/

HTML：

<html>
  <body>
    <div id="topFloat">
      BANNER TYPE STUFF
    </div>
    <div id="data">
      test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </body>
</html>

CSS：

#topFloat {
  border:1px black solid;
  position:fixed;
  top: 0;
}
#data {
  border: 1px red solid;
}

Answer 1

像这样吗？

#topFloat {
  border:1px black solid;
  position:sticky;
  top: 0;
}
#data {
  border:1px red solid;
}

<html>
  <body>
    <div id="topFloat">
      BANNER TYPE STUFF
    </div>
    <div id="data">
      test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </body>
</html>

如何在顶部浮动div-向下推其他div？

1 个答案: