1

これは私の簡単なコードです

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS の高さ 100% は DIV には適用されません。

これを取得するための他のCSSコードを知っています。しかし、なぜこのコードが機能しないのですか。スクリプトなしで高さ 100% と幅 100% で作業する方法。

4

2 に答える 2

7

機能するには%、高さも設定する必要がありparent elementます。

設定html, body {height: 100%}

ドキュメントから -

は、包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されていない場合、値は auto に計算されます。ルート要素 (例: ) の高さのパーセンテージは、最初の包含ブロック (その寸法はビューポートの寸法に等しい) に相対的です。

詳細については、MDN Percent Docを参照してください。

したがって、あなたの場合、次のようにすることができます-

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%;}
        div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
于 2013-07-02T03:48:34.447 に答える
2

を使用してこれを実現できますposition:aboslute;

jsフィドル

div {
    background:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
body {
    background-color:blue;
}

htmlまたは、高さを 100% に設定することもできますbody。この方法を使用する場合は、本文から余白を取り除いてください。

jsFiddle (マージンあり、スクロールバーに注意)
jsFiddle (マージンなし)

html, 
body {
    height:100%;
    margin: 0;
}
于 2013-07-02T03:50:42.353 に答える