javascript - 如何将 div float 在顶部 - 并将其他 div 向下推？-6ren

javascript - 如何将 div float 在顶部 - 并将其他 div 向下推？

转载作者：行者123 更新时间：2023-11-30 06:18:15

我觉得这是一个非常愚蠢的问题，但我读过的所有内容都没有让我明白如何使用它。我想要一个包含两个 div 的非常基本的页面。一个在顶部显示总体信息，一个在底部显示所有数据。当数据长于页面并且用户滚动时，我希望顶部的div向下 float 。我通过使用 position: fixed 和 top: 0 实现了这一点，但第一个 div 不会将第二个向下推。

当然，我可以将 margin-top 添加到数据 div，但我也希望能够切换顶部 div 开/关。当我这样做(将其关闭)时，margin-top 仍然存在，所以这显然有点 hack。

我怎样才能让一个 float 的 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;
}

最佳答案

是这样的吗？

#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>

关于javascript - 如何将 div float 在顶部 - 并将其他 div 向下推？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54834389/