CSS等高布局,3div自适应最高的高度

最新推荐文章于 2021-07-03 13:50:03 发布

dayanwu2842

最新推荐文章于 2021-07-03 13:50:03 发布

阅读量127

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/stephenykk/archive/2013/06/04/3116867.html

版权

  <!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=gb2312" />  
  <title>CSS等高布局</title> 
  <style type="text/css"> 
  *{  margin:0;  padding:0;  } 
  #wrap{   width:1000px;  margin:0 auto; overflow:hidden;  zoom:1;/* for ie6 */ }
  #left,#center,#right{  margin-bottom:-10000px;  padding-bottom:10000px;  } 
  #left{  float:left;  width:250px;  background:#00FFFF;  }
  #center{  float:left;  width:500px;  background:#FF0000;  } 
  #right{  float:right;  width:250px;  background:#00FF00;  } 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="left"> 
        <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p>
    </div>
    <div id="center">
        <p>center</p> <p>center</p> <p>center</p> 
　　　　<p>center</p> <p>center</p> <p>center</p> 
　　　　<p>center</p> <p>center</p> <p>center</p> 
　　　　<p>center</p> <p>center</p> <p>center</p>
　　　　 <p>center</p> <p>center</p> <p>center</p> 
　　　　<p>center</p> <p>center</p> <p>center</p> <p>center</p>
　　　　 <p>center</p> 
    </div> 
    <div id="right">
        <p>right</p> <p>right</p> <p>right</p> 
    </div>
    
</div> 
</body> </html>

子div: margin-bottom:-1000px; padding-bottom:1000px;

父div： overflow:hidden; zoom:1;

子div padding-bottom:1000px; 把自己的盒子向下推开变高了；margin-bottom:-1000px; 让父div可以向上收缩到内容实体的高度，含内容实体高度最高的子div把父div的收缩挡住了，所以看上去3个div高度相等。其实空白的高度都是padding,是可以布局内容的padding,因为设置了负外边距

转载于:https://www.cnblogs.com/stephenykk/archive/2013/06/04/3116867.html