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>

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

Answer 1

如果您知道子菜单的高度，则可以使用position: relative上的#container和position: absolute #content来完成}和#sub-menu。您还必须为#container 提供一个等于#sub-menu的高度的最高值。

Answer 2

您可以使用<div id=container> <div id=content>content</div> <div id=sub-menu>sub-menu</div> </div> ...

HTML：

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

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

CSS：

{{1}}

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

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或将其与小提琴连接起来的解释会更有帮助。

如何从底部到顶部移动div

4 个答案: