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

Question

I feel like this is a really dumb question, but everything I've read just isn't getting through to how I can use it. 我觉得这是一个非常愚蠢的问题，但是我读过的所有内容都还没弄清楚如何使用它。 I want to have a very basic page with two div s. 我想要一个非常基本的页面，其中包含两个div 。 One on top with overall information and one on the bottom with all the data. 顶部是整体信息，底部是所有数据。 When the data is longer than the page and the user scrolls, I want the top div to float down. 当数据长于页面且用户滚动时，我希望顶部div向下浮动。 I get that to happen by using position: fixed and top: 0 , but the first div doesn't push the second down. 我通过使用position: fixed和top: 0 ，但是第一个div不会将第二个向下。

I could, of course, add margin-top to the data div , but I also want to be able to toggle the top div on/off. 我当然可以在data div添加margin-top ，但是我也希望能够打开/关闭top div 。 When I do that (toggle it off), the margin-top remains, so it's clearly a bit of a hack. 当我执行此操作（将其关闭）时， margin-top仍然存在，因此很明显有些破绽。

How can I keep a floating div on top and push everything else down? 如何保持浮动div在顶部，而将其他所有项向下推？

Here's an example showing the basics of what I'm struggling with: 这是一个示例，显示了我正在苦苦挣扎的基础知识：

https://jsfiddle.net/vxf5dh7j/ https://jsfiddle.net/vxf5dh7j/

HTML: 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: CSS：

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

Answer 1

Something like this? 像这样吗

 #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 个解决方案

解决方案1
0 已采纳 2019-02-22 20:16:55

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-22 20:16:55

解决方案1
0 已采纳 2019-02-22 20:16:55