私はこの質問が100回尋ねられるのを見てきました、そして私は与えられたすべての解決策を試しました、そして私はまだこれをうまく動かすことができませんでした。
問題：親DIVに4つの子DIVがあり、2つにはコンテンツがあり、2つは外観専用です。
（[サイトシャドウ][左メニュー][コンテンツエリア][右シャドウ]）
コンテンツ領域にコンテンツ領域を拡張するのに十分なテキストがある場合、右の影と左のメニューグラフィックを、残りのDIVとともにページを下に拡張する必要があります。
私はclear：bothを親divに追加しようとしましたが、それは何もしません。以下に関連するコードを含めます。
親DIVに高さ％を追加すると、Webページの右側の影が完全に消えることを追加する必要があります
さらに、非常に大きなheight：4000pxを親divに追加すると、サイトのサイズを4000pxだけでなくコンテンツに合わせて変更したいのですが、すべてが希望どおりに機能します。
関連するHTML：
<div id="body_area">
<div id="body_left"></div><!-- just a left page graphic -->
<div id="sidebar">
some info here
</div>
<div id="content_area">
enough text here to cause the div to expand beyond browser height.
</div>
<div id="body_right"></div> <!-- just a right shadow graphic -->
<div id="footer"></div>
</div>
そして関連するCSS
#body_area{
overflow:auto;
width:1024px;
margin:0px auto;
clear:both;
}
#body_left{
height:516px;
width:25px;
margin:0px;
background:url("images/body_left.jpg") repeat-y;
float:left;
}
#body_right{
height:100%;
width:28px;
margin:0px;
background:url("images/body_right.jpg") repeat-y;
float:left;
}
#sidebar{
height:100%;
width:213px;
margin:0px;
background:url("images/side_menu.jpg") repeat-y;
float:left;
}
#content_area{
height:100%;
width:758px;
margin:0px;
background:url("images/content_area.jpg") repeat-y;
float:left;
}
#footer{
height:34px;
width:1024px;
margin:0px auto;
background:url("images/footer.jpg");
float:left;
}