如何从底部到顶部移动div

Question

我有一个可变高度,100%-width 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>

如何sub-menu在不使用CSS阻止页面内容的情况下将变量高度调到顶部？

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

如果您知道子菜单的高度，那么您可以使用position: relativeon#container和position: absoluteon#content和来完成此操作#sub-menu。您还必须给出#container 等于您的高度的顶部值#sub-menu。