将最后一个 HTML 元素放在页面顶部答案

【问题标题】：Position last HTML element at top of page将最后一个 HTML 元素放在页面顶部
【发布时间】：2014-05-10 19:20:27
【问题描述】：

我的布局是这样的：

<body>
  <div id="body"></div>
  <div id="header"></div>
</body>

我想要做的是将具有可变高度的#header 定位在绝对top:0 的页面顶部，并将#body 显示在#header 下方而不是在下方分层。

重要：

【问题讨论】：

好吧，但是为什么你的标题在 body 标签下呢？我想我们应该对你的计划进行一点教育。
你说的是固定位置吗？？如果不需要绝对定位，则应该在正文之前添加标题
你为什么要我们做你的功课？
@Viscocent 希望这不是“出于 SEO 原因”；我已经看够了这个都市传说... OP：只要#header 具有可变高度（并且它具有：缩放、更改默认字体大小等），就没有确定的方法
糟糕，我错了。 flexbox 可以轻松做到这一点，除了它是 IE10+（还有一个讨厌的 hack display: table-something 我并不为之骄傲......^^）

【解决方案1】：

使用以下代码将绝对顶部位置设置为 0：

#header {
position: absolute;
top: 0;
}

我还建议使用新的 HTML5 <header> 标签而不是 <div id="header"></div>

【讨论】：

【解决方案2】：

在“dsdev”的答案中，标题不会得到可变高度。

<div id="body">BODY</div> <div id="header"> HEADER <br /> HEADER <br /> HEADER </div>

我认为没有办法仅使用 html 和 css，因为将 #header 定位在 #body 上方的唯一方法是使用 css 'position' 元素，这不会导致高度可变。

【讨论】：