0

ヘッダー、スクロール可能なコンテンツ、およびフッターを含む次の HTML があり、正常に動作します。

この HTML に追加したいのは、3 つの 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 に答える