如何将div从底部移动到顶部

Question

我有一个高度不固定、宽度为100%的子菜单，一般情况下会被放置在页面底部。但是当使用小窗口浏览器查看时，我希望它能够位于页面顶部。以下是该页面的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将变量高度的子菜单置于页面顶部而不阻塞页面内容？

- Question Overflow

---

你是否使用了任何媒体查询？你是如何判断设备是否为小屏幕的？ - Undefined

@Sam：是的，我正在使用媒体查询，并以窗口宽度作为指示器。 - Question Overflow

你是如何将它定位在底部的？是使用position:fixed，还是使用元素的自然流动？ - ezakto

@eZakto：我正在利用元素的自然流动来将菜单默认定位在底部。 - Question Overflow

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

以上链接是演示的示例。

- jjenzz

Answer 2

如果你知道子菜单的高度，那么可以在 `#container` 上使用 `position: relative`，并在 `#content` 和 `#sub-menu` 上使用 `position: absolute` 来实现。你还需要给 `#container` 设置一个等于 `#sub-menu` 高度的顶部值。

- Ana

---

问题在于菜单是动态的，取决于我所在的页面，菜单本身可能会有更多或更少的链接。 - Question Overflow

这是一个非常有趣的问题。我会说一点JavaScript就可以解决，但我真的很好奇是否有人能想出一个纯CSS的解决方案。 - Ana

我看到了你在CSS3上的作品，对你绘制的太阳系印象深刻。如果你不能做到，我怀疑其他人也做不到。那就得将你的解决方案与JavaScript结合起来。 - Question Overflow

你介意帮我解决这个悬赏问题吗？ - Question Overflow

Answer 3

我不确定你的媒体查询是如何设置的。这可能与你的HTML结构不兼容，所以你可能需要编辑它才能使其正常工作。

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

上述代码需要放置在小屏幕的媒体查询内。

- Undefined

---

正如您所指出的那样，如果不更改HTML结构，它是无法工作的。子菜单将会阻挡内容。我正在寻找像浮动一样的解决方案。 - Question Overflow

“position: fixed” 很好，但我不会在移动设备上使用它，因为仍然存在很多问题 - 请查看 http://bradfrostweb.com/blog/mobile/fixed-position/ - Ana

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，或者通过链接到一个fiddle会更有帮助。

- Katti