7

ページのすべての高さを占めるように DIV 要素を設定する方法はありますか。何かのようなもの： 

div.left {
  height: 100%;
  width: 50%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

私はそれを数回Googleで検索しましたが、それらはすべて、おそらく単純な解決策を備えた本当に本当に単純な問題であるため、本当に本当に複雑な回避策のように見えます.

4

5 に答える 5

15

divが の直接の子である場合body、これは機能します。

body, html {height: 100%; }
div { height: 100%; }

height: 100%それ以外の場合は、 の直接の子に到達するまで、親、祖父母、... のそれぞれに追加し続ける必要がありbodyます。

それは簡単です。パーセンテージの高さが機能するには、親に指定された高さ (px、%... どちらか) が必要です。そうでない場合は、設定したかのようになりますheight: auto。

それを行う別の方法は、回答にあるとおりです。ページの高さを定義する要素に対して、絶対位置の値を指定することです。

于 2012-09-24T22:33:54.047 に答える
1

divが高さのコンテキストを持つように設定height: 100%してhtmlください。bodyお役に立てば幸いです。

于 2012-09-24T22:29:26.870 に答える
1

htmlおよびbodyを100％に設定する必要があることを確認してください。

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

ここでフィドル。

于 2012-09-24T22:30:48.713 に答える