0

何らかの理由で、.container境界線を適用すると、ブラウザ ウィンドウの 100% しか表示されません。それだけです ボーダーなしのコードは次のとおりです。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
}

.container {
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    display:block;

}

そして、HTMLは次のように単純です

<div class="container">
    <div class="inner_box">
        <div class="text_box">Project Three</div>
        <ul>
            <li>content</li>
        </ul>
    </div>
</div>

.container の高さを 100% にするために境界線が必要な理由を知っている人はいますか?

4

4 に答える 4

1

実際、コードでは 100% の高さが機能しています。国境がないと見えないだけです。確認したい場合は、Chrome で F12 キーを押し、html 要素にカーソルを合わせて、html 要素の適切な高さと幅を確認します。それでも問題がある場合は、.inner_boxクラスに 100% の高さを適用することを検討してください。それはいくつかの変更を行います。それでも、開発者ツールなしでは 100% の高さを確認することはできません。

于 2013-08-30T11:15:26.223 に答える
0

あなたのコンテナposition:relativeを与えて、あなたの内箱を絶対にセンタリングしてくださいmargin: auto; position:absolute top:0; bottom: 0; left: 0; right: 0;

.container {
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    display:block;
    overflow: auto;
    position: relative;

}

.inner_box {
    width: 800px;
    height: 600px; 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
    background-color: #f1f1ee;

}
于 2013-08-30T11:15:53.567 に答える
0

.. コンテナは hx 、 p などの内部要素のデフォルトのマージンを保持していないため...

ボーダーはパディングとしてトリックを行います。

その後、次を使用できます。 

.container {
   padding:1px;
   box-sizing:border-box;
   }
于 2013-08-30T11:13:02.130 に答える
0

私はあなたのコードを試し、開発者ツールで Chrome をチェックインしました。私にとって、あなたの .container は、境界線がなくても 100% の高さです。このコードで、問題ないことがわかります。

    background: red;

それをコンテナ クラスに追加すると、表示されます。

于 2013-08-30T10:57:57.510 に答える