設定高さ100％が動作しない

Question

何らかの理由により、高さ100％になっていてもコンテナの境界線が一番下まで移動しません。ここで私のコードは、コンテナは別のdivの中心にあります。

Htmlの

<div id="center"> 
<div class="container" > 
</div> 
</div> 

CSSの高さで何かの内側にする必要があるのdiv

#center { 
    float:left; 
    width:20%; 
    margin-top:10px; 
    height:100%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

Answer 1

あなたのCSSでこのような何かを含める必要があります...

body, html{ 
    height: 98%; 
    padding: 0; 
} 

は内に含まれる要素のマージンとボーダーに起因する垂直スクロールバーを排除するために、高さで遊んでみてください。

http://jsfiddle.net/4JgA4/1/

EDIT：

それ以外の場合は、100％にすると、垂直スクロールバーを排除する内部メイン要素の高さを減少させます。

body, html { 
height: 100%; 
padding: 0; 
} 

#center { 
float:left; 
width:20%; 
margin-top:10px; 
height:90%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

http://jsfiddle.net/4JgA4/3/

Answer 2

あなたのid = 'センター'。

これは私がスタイルを幅または高さ= 100％に設定するときはいつでも、「100％WHAT？その要素がどんなものであっても、幅と高さが適切に設定されているかどうかを確認するプロンプトが表示されます。

また、実際の場所と大きさを確認するために、色分けされた枠線を色分けして配置します。それは寸法を台無しにすることができますが、それはあなたが本当に何が起こっているの良いアイデアを与える。

Answer 3

有効な100％高さのプロパティでは、親divの高さを設定する必要があります。

あなたのケースでは、#centerの親要素は、あなたのcssが期待どおりに動作するための高さが必要です。

Answer 4

通常、指定した高さにかかわらずdivは内容と同じくらい高いです。あなたはそれらを入れ子にする必要があります。複雑さを避けるために、私は最大高さを設定し、コンテナの最下部に配置したい要素の絶対位置を使用します。

デザインアプローチとして、divの内容が必要な高さであることを確認する必要があります。パディングは非常に便利なツールです。ばかばかしいパディングを入れて、オーバーフローを隠すことができます。その後、あなたの最大高さでキャップを外します。