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

时间:2014-05-10 10:41:11

标签: html css html5 css-position

我有这样的布局:

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

我想要做的是让#header具有可变高度,位于页面顶部,绝对顶部为:​​0,#body显示在#header下面,而不是在下面分层。

重要的:

  • #header必须位于标记中的#body
  • 之下
  • #header必须显示为好像它位于标记<#li>中的#body上方
  • #header具有动态可变高度,因此我无法为#body分配固定的顶部填充
  • 我根本不能使用Javascript,它只能是HTML和CSS

2 个答案:

答案 0 :(得分:0)

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

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

我还建议您使用新的HTML5 <header>代码,而不是<div id="header"></div>

答案 1 :(得分:0)

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

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

http://jsfiddle.net/uQ2RE/

我认为没有办法使用html和css只是因为将#header放在#body之上的唯一方法是使用css'position'元素,这样就不会导致变量高度。

相关问题