1

さまざまな動的コンテンツの高さまで拡張するために、さまざまな div が必要なサイトがあります。私が理解していることから、100％の高さが子divで機能するには、すべての周囲/親divが100％の高さである必要があります。

html と本体の css に 100% を追加したところ、すべてがひどいものになりました。私はこの問題の調査と解決に多くの時間を費やし、非常に基本的な失敗例にたどり着きました。

誰でも理由を説明できますか

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
html,body{
    height:100%;
}
</style>
</head>
<body>
<div style="height:100%; background-color:#00ff00;">
    <div style="height:3000px; border:2px solid #ff0000;">
        <br style="clear:both;" />
    </div><br style="clear:both;" />
</div>
</body>
</html>

私が想定するように動作しませんか？内側の div が親の div を引き伸ばすことを期待します。なぜそうなのかわかりません。誰かが私にこれを説明したり、正しい方向に向けたりできますか?

ありがとう

4

1 に答える 1

0

10 年間 Web アプリケーションのプログラミングを行ってきましたが、なぜ毎回このようになるのか、いまだにわかりません。私は多くのプログラマーに対してこの問題を見てきました。説明はとても簡単です。

HTML では、レイアウト システムに という名前の主要な CSS オプションがありますdisplay。display出力に表示したいものすべてを変更するオプションには、主に 2 つの値があります。最初の値はblock、2 番目の値は 、 inline3 番目の値は上記の値の組み合わせですinline-block。displayある要素の値がブロックである場合、それはすべてを水平方向にブロックし、要素はその隣に配置されません。ただしheight、同じことを行うオプションはありません。

私の知る限り、height値をに設定する100%と、手動で値の余白と境界線の幅を計算する必要があります。問題は、widthプロパティの値を body に設定すると、body 要素100%のデフォルト値がmargin「0」！そして、出力はたわごとのように見えます。それは愚かにスクロールしているためです。marginしたがって、('body' 要素で) を '0' に設定する必要があります。

また、別の問題は、マージンを実行してスクロールが修正されたときです。「body」要素の「overflow」プロパティをhiddenorvisibleに設定する必要があり、「display」オプションのデフォルト値である「scroll」ではありません。身長計算公差の裏口だ！出力に表示されます。

確かに、どの要素にも「クリア」プロパティを使用することは好みません。また、互換性の問題のために最初の行で関連する「DOCTYPE」(HTML4 など) を使用する方がよいでしょう。

編集されたバージョンは次のとおりです。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <style>
            body
            {
                height: 100%;

                margin:0;

                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <div style="height: 100%; background-color: #00ff00;">
            <div style="height: 100%; border: 2px solid #ff0000;">
            </div>
        </div>
    </body>
</html>
于 2012-09-06T11:24:11.633 に答える