Question

我有以下带有标题，可滚动内容和页脚的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>

Answer 1

如果我了解你，那么问题在于你提供的position:absolute和position:fixed。

当您将它们包裹在<div>中时，您必须提供该div position（例如相对）。绝对元素和固定元素与最接近的元素相关。在你的情况下..无论你把它们包裹在10个div中......最接近的位置元素都保持 BODY 。

标题+内容+页脚，其形式可以嵌套所有内容

1 个答案: