どうすればwrapper div height autoを得ることができますか？

<style> 
body{ 
background:#FF9900; 
color:#FFFFFF; 
} 
.wrapper{ 
    width:900px; 
    height:auto; 
    padding:0px; 
    margin:auto; 
    background:#000000; 
    } 
.header{ 
    width:900px; 
    height:50px; 
    float:left; 
    padding:0px; 
    margin:0px; 
    } 
.body_content{ 
    width:900px; 
    height:200px; 
    float:left; 
    padding:0px; 
    margin:0px; 
    } 
.fotter{ 
    width:900px; 
    height:50px; 
    float:left; 
    padding:0px; 
    margin:0px 0px 25px 0px; 
    } 
</style> 


    <div class="wrapper"> 
    <div class="header">Header</div> 
    <div class="body_content">Body Content</div> 
    <div class="fotter">Footer</div> 
    </div>

私がラッパーdivの高さを与えた場合：「500px」背景色が黒く見えます。しかし、もし私がheight = "auto"に変更すれば、私は色を見ることができません。どうすればwrapper div height autoを得ることができますか？

これを手伝ってもらえますか？

link text

出典

2010-11-24 Sridhar

があなたの#wrapperスタイルにoverflow: hiddenまたはoverflow: autoを追加します。..こちらをご覧ください。

浮動小数点型の要素を持つコンテナにはデフォルトで高さがないため、上記のハック（またはその他）を使用してコンテナの高さを強制的に高くする必要があります。

#wrapperの最後の要素に<div style="clear: both;"></div>を追加することもできます。これも有効です。

出典

2010-11-24 10:46:26

を解決することを願っています：隠されたまたはオーバーフロー：自動..私は私の更新を参照してください – Sridhar

スクローラーを取得しています... –

ここで私は「ライブサイトのURLだが私がhttp://202.53.11.62/wrapper/で作業している場合、ラップトップのdivの高さを550pxに設定すると、bgcolorの罰金が表示されますが、自動に設定されていない場合は – Sridhar

コンテンツがないためですか？ 'lorem ipsum'を追加して、あなたが得るものを見てください。

出典

2010-11-24 10:46:40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 


<style> 
body{ 
background:#FF9900; 
color:#FFFFFF; 
} 
#wrapper{ 
    width:900px; 
    height:auto; 
    padding:0px; 
    margin:auto; 
    background-color:#990000; 
    clear:both; 
    } 
.header{ 
    width:900px; 
    height:50px; 
    float:left; 
    padding:0px; 
    margin:0px; 
    } 
.body_content{ 
    width:900px; 
    height:200px; 
    float:left; 
    padding:0px; 
    margin:0px; 
    } 
.footer{ 
    width:900px; 
    height:50px; 
    float:left; 
    padding:0px; 
    margin:0px 0px 25px 0px; 
    } 
</style> 

<body> 
    <div id="wrapper"> 
    <div class="header">Header</div> 
    <div class="body_content"> 
     <p>Body Content</p> 

    </div> 
    <div class="footer">Footer</div> 
    <hr/> 

    </div> 
</body> 
</html>

この私はそれをオーバーフローした場合、問題

出典

2014-05-29 07:54:20

divタグを追加してdivラッパーを閉じます –

どうすればwrapper div height autoを得ることができますか？

答えて

関連する問題