如何在頂部浮動div-向下推其他div？

Question

我覺得這是一個非常愚蠢的問題，但是我讀過的所有內容都還沒弄清楚如何使用它。 我想要一個非常基本的頁面，其中包含兩個div 。 頂部是整體信息，底部是所有數據。 當數據長於頁面且用戶滾動時，我希望頂部div向下浮動。 我通過使用position: fixed和top: 0 ，但是第一個div不會將第二個向下。

我當然可以在data div添加margin-top ，但是我也希望能夠打開/關閉top 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 個解決方案

解決方案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