1

と呼ばれる外側のdiv要素とと呼ばれるcontainer2つの内側のdiv要素がfirstDivありますsecondDiv

firstDivは左に浮き、secondDivは右に浮きます。

外側のdiv要素にできるだけ多くの幅を持たせたいのですが、これは使用可能な幅の100％を意味します。

containerまた、2つの内側の要素に半分のスペース、つまりdivの50％を使用させたいと思います。

このための基本的なコードは次のとおりです。

<html>
    <head>
    
    <style type="text/css">
        #container{
            width:100%;
            height:100%;
            border-style:solid;
        }
    </style>
    </head>
    
    <body>
        <div id="container">
            <div id="firstDiv"> </div>
            <div id="secondDiv"> </div>
        </div>
    </body>
</html>

質問1

ボディ要素を囲む単純な実線の境界線を期待していましたが、それはそうであるように見えましたが、ブラウザーのy次元にスクロールバーが表示されました。なぜこれが起こったのですか？体の幅と高さを100％欲しいと言ったのですが、それ以上のブラウザを使っているようです。

ここで、次のCSSコードを追加しました。

    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        }

質問 2divは「コンテナ」divの50％を占めるようですが、高さは100％を超えているようです。なぜこれが起こったのですか？写真： ここに画像の説明を入力してください

2番目のdivについても同じことを行い、次のCSSコードを使用してfloatプロパティを含めます。

    #container{
        width:100%;
        height:100%;
        border-style:solid;
    }
    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        float:left;
        }
    #secondDiv{
        width:45%;
        height:100%;
        border-style:solid;
        float:right;
        }

質問 32つのdiv要素で2列のページを形成したかったのです。ただし、2番目のdiv要素は、前の要素のように意図したよりも高さが高くなります。また、ブラウザーのサイズを変更すると、2番目のdivが最初のdivの下に配置されます。

ここに画像の説明を入力してください

なぜこれが起こっているのですか、どうすれば回避できますか？

前もって感謝します

4

2 に答える 2

3

あなたの質問はすべて、あなたが誤解したボックスモデルによるものです。height: 100% は content-height を 100% にします。ボーダー AND 高さ: 100% がある場合、これは 100% + ボーダー幅になり、明らかに 100% を超えます。

考えられる解決策は、box-sizing: border-box; を使用することです。

このプロパティをサポートしていないブラウザは IE<8 だけです。これらが関連している場合は、CSS 式を使用して回避策を作成できます。取扱注意！

于 2012-11-29T13:42:18.193 に答える
2

要素の幅を計算するときに、境界線はカウントされません。指定された幅の補足です。これはあなたのわずかな矛盾を説明しています。私が知る限り、この問題に対する100％の気密な解決策はありません。それは、あなたが望むことを正確に実行します（それに近い、はい、しかし正確には、いいえ）。最も信頼できるのはテーブルを使用することですが、すでにご存知のように、これはページレイアウトを設計するための有効なソリューションではありません。もう1つのオプションは、左右にフロートすることですが、幅を50よりわずかに低いパーセンテージ（48〜48など）として指定するか、px必要な正確なサイズを正確に計算できる幅を指定します。

ブラウザがCSS3を均一に実装し始めると、box-sizingプロパティはこの問題を解決できるようになります。box-sizing要素のサイズを計算するときに考慮すべきことを指定します。適用するbox-sizing:border-box;と境界線が考慮されますが、現時点では、コードで確実に使用するには、ブラウザー間で十分に実装されていません。

于 2012-11-29T13:43:04.603 に答える