css中height:100%无效的解决方案

发布于 2011-12-21 作者 [重庆SEO]

本文来自百度空间博客搬家

2007年开始使用的是 hi.baidu.com/udjy
后来百度空间强制升级为轻博客 hi.baidu.com/imnoco
2015年百度关闭了百度空间

在前端设计中常常会遇到这样的问题:如何让容器高度100%填充整个body。大家都知道简单的给div定义一个height:100%是没有效果 的,其实不然。下面我们来分析一下原因:CSS属性是有继承性的,而百分比都又是相对的,那么height:100%就是相当于容器父级而言的。所以并不 是这个高度100%没有效果,只是没有达到我们预期的效果,我们理解上的错误。
理解了高度100%的意义,剩下的就简单了,给body一个100%高度即可。

 html, body {height: 100%;}
    #container {height: 100%;}

或者

 html, body {height: 100%;}
    #container {min-height: 100%;}
    * html #container {height: 100%;} 

/*=========浏览器满屏两列布局例子===========================*/

*{
 margin:0;
 padding:0;
 list-style:none;}
html,body{
 height:100%;
 width:100%;}
body{
 background:#f1f1f1;
 font-size:14px;
 line-height:22px;
 font-weight:100;}
.left,.right{
 float:left;}
.left{
 background:#fff;
 width:50%;
 min-height:100%;
 height:auto;
 _height:100%;}
.right{
 width:45%;}