白舟空间 » div http://www.baizoo.cn 乘风破浪会有时 Wed, 01 Sep 2010 06:47:03 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 div自适应高度 http://www.baizoo.cn/archives/878.html http://www.baizoo.cn/archives/878.html#comments Fri, 01 Jan 2010 07:02:43 +0000 baizoo http://www.baizoo.cn/?p=878 朋友问一个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>


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自适应高度的问题，都可以以这段css作为参考。

]]> http://www.baizoo.cn/archives/878.html/feed 0