如何將div從底部移動到頂部

Question

我有一個可變的height ， 寬度 sub-menu 100％的 sub-menu ，通常位於頁面底部。 通過帶有小窗口的瀏覽器查看時，我希望它位於頁面頂部。 以下是頁面HTML的結構：

<div id=container style='height: 500px; background: red;'>
 <div id=content style='width: 100%; background: green;'>content</div>
 <div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div>
</div>

如何在不使用CSS阻止頁面內容的情況下將可變高度sub-menu置於頂部？

Answer 1

您可以使用display: table-header-group; ...

HTML：

<div id=container>
    <div id=content>content</div>
    <div id=sub-menu>sub-menu</div>
</div>

CSS：

#container {
  display: table; 
  width: 100%;
}

@media (min-width: 500px) {
  #sub-menu {
    display: table-header-group;
  }
}

演示： http : //jsbin.com/lifuhavuki/1/edit?html,css,output

Answer 2

如果知道子菜單的高度 ，則可以使用#container上的position: relative和#content和#sub-menu上的position: absolute來#sub-menu 。 您還必須給#container 一個等於 #sub-menu 高度的最高值 。

Answer 3

我不確定您如何設置媒體查詢。 您的html結構可能無法實現此功能，因此您可能必須對其進行編輯才能使其正常工作。

#sub-menu
{
  position:fixed;
  top:0;
  width:100%;
  background-color:#f00;
}

上面的代碼將需要放在小屏幕的媒體查詢中。

Answer 4

這是CSS媒體查詢解決方案。

/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
position:absolute;
top:0px;
height:auto; /* So that the content wont be lost with the reduction in width. */
}

只需更多說明您如何放置div或將其與小提琴鏈接起來，將很有幫助。