div自适应高度
January 1st, 2010
朋友问一个div自适应高度的问题，其实我也好久没关注css了，但是朋友问起来，还是帮忙解决一下。我没怎么深入去研究，只是从pjblog的皮肤里提取了最外层的div框架就能得到这个div自适应高度的案例。贴出代码如下：
css
<style>
/*---主体样式---*/
#container{width:960px;margin:0 auto;padding:0;text-align:center; margin-top:10px;/*/margin-top:0px;*/}
/*---内容样式---*/
#container #Tbody{float:left;width:960px;background:#777C7F repeat-y center;margin:0px;text-align:left;}
/*---工具条--*/
#sidebar{float:right;width:300px;margin:10px 25px 10px 0;*margin:10px 25px 10px 0;_margin:10px 12px 10px 0; background-color:#0000FF;}
/*---主内容--*/
#mainContent{float:left;width:600px; /*border-right:#eee 1px solid;*/text-align:center;margin:10px 0 10px 20px;_margin:10px 0 10px 6px;background-color:#006600;}
</style>
/*---主体样式---*/
#container{width:960px;margin:0 auto;padding:0;text-align:center; margin-top:10px;/*/margin-top:0px;*/}
/*---内容样式---*/
#container #Tbody{float:left;width:960px;background:#777C7F repeat-y center;margin:0px;text-align:left;}
/*---工具条--*/
#sidebar{float:right;width:300px;margin:10px 25px 10px 0;*margin:10px 25px 10px 0;_margin:10px 12px 10px 0; background-color:#0000FF;}
/*---主内容--*/
#mainContent{float:left;width:600px; /*border-right:#eee 1px solid;*/text-align:center;margin:10px 0 10px 20px;_margin:10px 0 10px 6px;background-color:#006600;}
</style>
CSS布局
<div id="container">
<div id="header"> <!--顶部--></div>
<div id="Tbody"> <!--内容-->
<div id="mainContent">
<div id="innermainContent"> </div>
</div>
<div id="sidebar">侧边</div>
<div style="clear: both;height:1px;overflow:hidden;margin-top:-1px;"></div>
</div>
<div id="foot"><!--底部--> </div>
</div>
<div id="header"> <!--顶部--></div>
<div id="Tbody"> <!--内容-->
<div id="mainContent">
<div id="innermainContent"> </div>
</div>
<div id="sidebar">侧边</div>
<div style="clear: both;height:1px;overflow:hidden;margin-top:-1px;"></div>
</div>
<div id="foot"><!--底部--> </div>
</div>
其他地方div自适应高度的问题，都可以以这段css作为参考。
Recent Comments