2

私は次のHTMLを持っています:

<div id="contents">
    <div id="inner">Inner Div</div>
</div> 

<div id="footer">Footer</div>​

次の CSS を適用します。

#contents {
    position: relative;
}

#inner {
    position: absolute;
    background-color: green;
    width: 100%;
}

#footer {
    background-color: red;
}​

問題は、#footerが折りたたまれて の下にあること#contentsです。こちらのjsfiddleでも確認できますhttp://jsfiddle.net/MAhmadZ/YkJMH/1/

注:これは、より大きなページからの単なる要約です。positionプロパティを使用するしかありません。divすべての絶対位置の中に複数あり#contents、一度に表示されるのは 1 つだけです。身長が定かでない

4

4 に答える 4

5

絶対配置によってフローから取り出された#contents後、要素は空であるため、高さがゼロになり、その結果、その下に折りたたまれます。#inner#footer

高さまたは垂直方向のパディングを指定すると、絶対配置要素の下にスライドするの#contentsを防ぐ必要があります。#footer

于 2012-08-24T15:35:47.337 に答える
2

これで修正されるはずです：

#contents {
    position: relative;
}

#inner {
    position: absolute;
    background-color: green;
    width: 100%;
}

#footer {
    background-color: red;
    position: absolute;
    width: 100%;
    bottom: 0;
}​

あなたの問題は#inner絶対に配置されています。これにより、HTML レイアウトのSTATICフォーマットから見えなくなります。

于 2012-08-24T15:49:57.823 に答える
0

達成したいことはよくわかりませんが、フッターを使用するように設定できます position: fixed および bottom: 0px をページの下部に保持します。

于 2012-08-24T15:37:46.277 に答える
0

私は自分で次の解決策を考え出しました：

#footer:before {
    content: '.';
    display: block;
    width: 100%;
}

ライブで確認してください: http://jsfiddle.net/MAhmadZ/YkJMH/5/

于 2012-08-24T16:56:51.590 に答える