0

我有以下具有页眉、可滚动内容和页脚的 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>
4

1 回答 1

0

position:absolute如果我理解你..你的问题是position:fixed你给他们的。

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

于 2013-01-11T09:58:52.597 回答