如何将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或将其与小提琴链接起来，将很有帮助。