search

Home >Web Front-end >HTML Tutorial >CSS equal height layout, 3div adapts to the highest height_html/css_WEB-ITnose

CSS equal height layout, 3div adapts to the highest height_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:27:181083browse

  <!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>

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

Parent div: overflow:hidden; zoom:1 ;

The child div padding-bottom:1000px; pushes its own box down to become taller; margin-bottom:-1000px; allows the parent div to shrink upward to the height of the content entity, including the height of the content entity. The tallest child div blocks the shrinkage of the parent div, so it looks like the three divs have the same height. In fact, the height of the blank space is padding, which can be used to lay out content, because negative margins are set

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css div height adaptive_html/css_WEB-ITnoseNext article：css div height adaptive_html/css_WEB-ITnose

Related articles

See more