10

我有一个可变的 height，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 阻塞页面内容的情况下将可变高度置于顶部？

4

4 回答 4

5

你可以使用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

于 2015-07-24T15:21:02.120 回答
3

如果你知道你的子菜单的高度，那么你可以在你的and上使用position: relativeon#container和。您还必须提供等于您的高度的最高值。position: absolute#content#sub-menu#container #sub-menu

于 2012-05-26T09:09:15.857 回答
1

我不确定您是如何设置媒体查询的。这对于您的 html 结构可能无法实现，因此您可能必须对其进行编辑才能使其正常工作。

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

上面的代码需要放在小屏幕的媒体查询中。

于 2012-05-26T09:04:47.440 回答
0

这是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 或通过小提琴将其链接起来的更多解释会有所帮助。

于 2012-05-26T10:12:11.600 回答