页眉 + 内容 + 页脚，带有嵌套所有内容的表单答案

【问题标题】：Header + Content + Footer with a form that nests everything页眉 + 内容 + 页脚，带有嵌套所有内容的表单
【发布时间】：2013-01-11 17:58:52
【问题描述】：

我有以下带有页眉、可滚动内容和页脚的 HTML，它工作正常。

我想添加到这个 HTML 的是一个包含所有三个 div 的表单，问题是只要我用标签包装 div，布局就会中断。有什么建议吗？

<head>
</head>

<style>
<!--
body {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

* html body {
    padding: 50px 0 50px 0;
}

div#header {
    background-color: yellow;
    position: absolute;
    top: 0px;
    height: 50px;
    width: 100%;
}

div#content {
    background-color: red;
    position: fixed;
    top: 50px;
    bottom: 50px;
    overflow: auto;
    width: 100%;
    height: 100%;
}

div#footer {
    background-color: blue;
    position: absolute;
    bottom: 0px;
    height: 50px;
    width: 100%;
}
-->
</style>

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

  <div id="content">
    bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br />
    bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br />
    bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla last<br />
  </div>

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

【问题讨论】：

标签： html css

【解决方案1】：

如果我理解你的话 .. 你的问题在于你给他们的 position:absolute 和 position:fixed。

当您将它们包装在 <div> 中时，您必须提供该 div position（例如相对）。 absolute 和 fixed 元素与 最近定位 元素相关。在您的情况下..无论您将它们包装在 10 个 div 中..最接近的定位元素仍然是 BODY。

【讨论】：

我提供的 HTML 可以正常工作，但我希望在添加时
... div ...

到上面的 HTML 布局中断了！我怎样才能做到这一点？