css - CSSで画面の高さをdivの高さに設定する

Question

私はHTML5、javascript、およびCSSに取り組んでおり、javascriptとjqueryを使用せずにCSSのみで画面の高さを取得し、それに応じて「div」の高さを設定したい..任意の画面に合わせて調整します。height=100% を使用してみましたが、div のコンテンツと同じくらいの高さが必要です。どんなアイデアでも助けてください..

前もって感謝します！！

Answer 1

height=100% の設定が機能するはずです。含まれている要素も 100% の高さに設定されていることを確認し、position:absolute を追加してください。

ここにフィドルがあります：

http://jsfiddle.net/C3anM/

<div id="wrapper">Test content </div>

+

#wrapper {
    height:100%;
    background-color:green;
    position:absolute;
}

Answer 2

ビューポート関連の css ユニットを探しているのではないかと思います。現時点では全面的にサポートされていませんが、最新のブラウザーを使用しているユーザーの間では非常によくサポートされています。

仕様では、次のように定義されています。

vwユニット

最初の包含ブロックの幅の 1% に等しい。

vhユニット

最初の包含ブロックの高さの 1% に等しい。

vmin ユニット

「vw」または「vh」の小さい方に等しい。

vmax ユニット

「vw」または「vh」の大きい方に等しい。

典型的なパーセンテージ幅は、最も近い親を基準にして要素のサイズを調整します。または、絶対配置の場合、position: relative;ビューポート相対の長さは常にビューポートを基準にして計算されますが、絶対配置の場合は....ビューポートの親要素に関係なく、木。

Answer 3

あなたはそれを絶対に配置しようとしていると思います。

div{
    height:100%;
    width:100%;
    position:absolute;
    border:1px solid red;
}

http://jsfiddle.net/btevfik/DMUcY/

pxデフォルトでは、位置は静的です。したがって、高さの値を設定しない限り、div は順番に配置され、高さはコンテンツによって計算されます。

http://jsfiddle.net/btevfik/MjM9Y/

Answer 4

以下を設定する必要があります。

html, body
{
    height: 100%;
} 

jsFiddle: http://jsfiddle.net/sG8gm/