2

css で要素の幅を 100% に設定すると、ブラウザ ウィンドウのサイズを変更すると、この要素が調整されます。代わりに高さを 100% に設定すると、ウィンドウのサイズを変更するときに要素が更新されず、代わりに、ウィンドウが最初の 100% の高さを超えて拡大されると、コンテンツが切り取られます。

どうしてこれなの？

編集：スクロールが問題です。スクロールしてもサイズ変更されません。カットオフを探してサイトを離れます。

4

3 に答える 3

1

基本的に、divの高さは、bodyとhtmlの親の固定の高さによって制限されています。

試す：

HTML

<div id="full">
    Content
</div>

CSS

html, body {height: 100%;}
#full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}

または、必要に応じて：フルマークアップ

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {height: 100%;}
            #full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}
        </style>
    </head>
    <body>
        <div id="full">
            Content
        </div>
    </body>
</html>

重要なのは、次のように設定height:100%し、表示プロパティを設定することです。display:table;

于 2013-03-12T08:48:56.143 に答える
1

Height: 100%「親要素と同じ高さ」を意味します。したがって、親要素の高さが 300px しかない場合、子要素も最大 300px の高さにすることができます。これは幅にも当てはまりますが、ブロック レベルの要素は、デフォルトで使用可能な水平方向のスペースをすべて占有します。

これはインライン要素には適用されないことに注意してください。インライン要素は高さ/幅をすべて無視します。

編集要素を見てください：

<html>
<body>
<div class="wrapper">
</div><!-- end wrapper -->
</body>
</html>

あなたのbody要素はどのくらいの高さですか？100%ですか？あなたのhtml要素はどのくらいの高さですか？100%ですか？

于 2012-09-18T12:07:34.863 に答える
0

コードに問題がある可能性があるので、このDEMOを試してみてください。

于 2012-09-18T12:05:22.160 に答える