高度自适应布局_html/css_WEB-ITnose

　　　　在网页布局中，经常用到高度自适应增长的布局。如左侧是文章内容部分，随着文章内容的变化，高度也不固定，右侧则是一些固定高度的相关内容。如图所示：

　　简单摸索后发现CSS中有一个min-height的属性，如果设置min-height为200px，当高度大于200px时，则自动开始增长；小于200px则为200px。结合float：left，我的布局如下：

　　红色部分是测试文字部分。

　　具体样式如下：

　　#main{

　　　　margin:0 auto;

　　　　width:1000px;

　　　　min-height:300px;

　　}
　　#left{

　　　　width:600px;
　　　　min-height:300px;
　　　　float:left;
　　　　background-color:#cc00cc;
　　}
　　#right{

　　　　width:400px;

　　　　height:300px;

　　　　float:left;

　　　　background-color:#cccc00;

　　}
　　#footer
　　{

　　　　float:left;

　　　　margin:0 auto;

　　　　width:1000px;

　　　　height:60px;

　　　　background-color:#cccccc; background-image:url('20120227095908_5zK2V_thumb_600_0.jpg');//背景图片

　　}

　　经过简单的测试后发现，各类浏览器完全适用，OK，搞定！