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

NOCO发布于 2011-12-21 分类 Html5

573天前有1个用户阅读过

本文来自我的百度空间博客详情

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%;}

-- The End --

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

评论