2012-06-22 3 views
5

これに関連するSOにはたくさんの質問がありますが、スキャンしたものはすべて詳細な特定の状況です。私が知りたいことは、概念レベルで言うことは何ですか:divにstyle = 'height:100%'を与える​​のはどういう意味ですか?

<div style='height:100%'> 

100%の高さはどれですか?何の100%?

[EDIT]

フォローの質問:100%は親の高さを表すが、親が<体>で、div要素の高さ以外の高さを持っていない場合は、それが何を意味するのでしょうか?それは再帰的に定義されたようです。

答えて

4

親コンテナの高さの100%。

はここを参照してください:あなたはdiv要素に、ページの高さを100%にするために、このメソッドを使用する場合はhttp://jsfiddle.net/6VRn6/

は、あなたにも身体とhtmlの100%と高さを指定する必要があります。あなたがhtmlbody高さを指定しない場合は

body, html { 
    height: 100%; 
} 

、その高さは、その中の要素の高さの合計です。

Updated demoこれを示す。 2pxの境界線を持つ200px divには合計204px、次に40pxステータスdivがあります。 bodyの高さは244ピクセルです。ここでCSSをページに追加すると、高さはjsfiddleの右下の象限の高さになります。それを追加して、コードをもう一度実行してみてください。結果ペインのサイズを変更し、再度実行して高さの変化を確認します。

5

offsetParentの100%。ほとんどの場合、それは文書です。 static以外のpositionの要素でも、テーブルの構成要素でもかまいません。

+0

、ランダム要素の束がdivの内側にあると仮定すると? 100%は意味がありませんか? –

+0

ページが読み込まれたときにウィンドウの高さになると思いますが、わかりません。私はそのような疑わしいCSSを使用しない;) –

+0

@ScottStafford 'body'の高さは、その中の要素の高さになります。私の例では(私の解決策では)、2pxの境界線を持つボックスがあります。 '$(" body ")。height()' 204 'を返します。(200px + 2px * 2 top/bottom) – sachleen

1

高さ:100%を意味します: 親として大きくなるようにしてください!

0

それはちょうどそれが内部に封入されてdivまたはclassまたはtagの100%を意味します。アイデアを持ってみいくぶんこの:

{--parent loop { ..height 100% of above loop .. } }

文書、そして、他に指定されていなかったがいかに高い
関連する問題