0

私はしばらくこれに苦労していて、解決策を見つけることができないようです。フレーム、トップボックス、左ボックスと右ボックス、そして最後の2つを含む中央のボックスがあります。

フレームの高さからトップボックスの高さを引いたものにします。これにより、フレームがいっぱいになり、それ以上何も残りません。

私の現在のコードの何が問題になっていますか、そしてこれを達成するための適切な方法は何でしょうか？

コードは次のとおりです。

<html>
    <head>
        <style type="text/css">
            #frame {
                width: 800px;
                min-height: 500px;
                border: 1px solid black;
            }

            #top {
                width: 800px;
                height: 80px;
                float: left;
                background-color: #666;
            }

            #middle {
                width: 800px;
                height: 100%;
                float: left;
            }

            #left {
                width: 200px;
                height: 100%;
                float: left;
                background-color: #B3B4BD;
            }

            #right {
                width: 600px;
                height: 100%;
                float: left;
                background-color: #99BC99;
            }
        </style>
    </head>
    <body>
        <div id="frame">
            <div id="top">Top</div>

            <div id="middle">
                <div id="left">Left</div>
                <div id="right">Right</div>
            </div>
        </div>
    </body>
</html>
4

2 に答える 2

2

親の高さを明示的に設定しない限り、100% の高さを指定することはできません。その理由は、通常、親はその子に合わせて高さを拡張するため、正確な高さを指定して、親がその高さを子供が必要とするのに間に合うように知る必要があるためです。

とはいえ、同様の効果を達成する方法はいくつかあります。たとえば、一方の div が通常他方よりも高い場合、絶対配置を使用して 2 番目の div を同じ高さに伸ばすことができます。または、本当に絶望的な場合は、テーブルを使用できます。

于 2013-01-09T21:01:05.170 に答える
0

正確なピクセルの代わりにプロポーションを使用してみてください。

        #frame {
         width: 80%;
         min-height: 500px;
         border: 1px solid black;
         margin-right:auto;
         margin-left:auto;

        }

        #top {
            width: 100%;
            height: 80px;
            float: left;
            background-color: #666;
        }

        #middle {
            width: 100%;
            height: 100%;
            float: left;
        }

        #left {
            width: 33%;
            height: 100%;
            float: left;
            background-color: #B3B4BD;
        }

        #right {
            width: 66%;
            height: 100%;
            float: left;
            background-color: #99BC99;
        }

jsFiddle

これは、更新されたCSSを使用したデモのスクリーンショットです。 更新されたCSSを使用したデモのスクリーンショット

于 2013-01-09T20:55:52.993 に答える