css - 如何使用蓝图 css 垂直排列行（或 div）？

Question

我有以下 html 代码（按给定顺序）

<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>

当然，我想在顶部显示页眉部分，然后是内容部分，然后是页脚。如何通过使用蓝图的 CSS 代码来做到这一点？

PS：内容部分先写，对SEO更友好

编辑：该解决方案应该以任何 div 部分的编写顺序工作。例如，div“内容”可以写在 div“页脚”之后的 XHTML 文件中......但我仍然希望页脚显示在内容下方（其高度未知，因为取决于内容）

score 0 · Accepted Answer

不知道blueprint有没有提供这个功能。但它可以在简单的 css 中轻松完成。

我假设标题的高度是固定的，比如 100 像素。

#header {
    height:100px;
    position: absolute;
    top: 0px;
}

#content{
    padding-top:100px;
}

更新：

刚发现两个类似的问题：

它们与我的答案基本相同（已知 div 的较高高度）或使用 JS 重新排序它们。

score 0 · Accepted Answer

您应该能够在任何 div 上使用绝对定位和块，将它们放在页面上您喜欢的任何位置。

例如，获取代码：

<div id="foo"></div>
<div id="bar"></div>

要使 bar 出现在 foo 上方，如果 foo 为 100px，请使用以下命令：

#bar{
   top:100px;
   left:0px;
   position:absolute;
   display:block;
}

2 回答 2