DIV自适应布局

宽度自适应(液态布局)

CSS

        /*左边栏，设定宽度*/
        .wrap_l
        {
            float: left;
            width: 150px;
            border: 1px solid #333;
        }
        /*中间栏，宽度auto*/
        .wrap_m
        {
            width: auto;
            margin: 0 140px 0 150px;
            border: 1px solid #000;
        }
        /*右边栏，固定宽度*/
        .wrap_r
        {
            float: right;
            width: 140px;
            border: 1px solid #999;
        }

HTML

<div id="wrap">
        <div class="wrap_l">
            这是左边部分<br />
            这是左边部分<br />
            这是左边部分
        </div>
        <div class="wrap_r">
            这是右边部分<br />
            这是右边部分<br />
            这是右边部分
        </div>
        <div class="wrap_m">
            这是中间部分
        </div>
    </div>

高度自适应

CSS

*{margin:0;padding:0;}

body, html {
 margin: 0;
 padding:0 !important;
 padding:124px 0 32px 0;
 width:100%;
 height:100%;
 overflow:hidden;
}
.main_top {
 background:#C9F;
 width:100%;
 height:124px;
 overflow:hidden;
 position:absolute;
 top:0;
 width:100%;
}
.middle {
 position:absolute!important;
 position:relative;
 top:124px!important;
 top:0;
 bottom:32px;
 width:100%;
 overflow:hidden;
 height:auto!important;
 height:100%;
 left: -3px;
}
.main {
 height:100%;
 background:#FCC;
 overflow-y:auto;
}
.footer {
 background:#9CF;
 width:100%;
 height:32px;
 color:#e1efff;
 line-height:32px;
 letter-spacing:1px;
 text-align:center;
 clear:both;
 position:absolute;
 bottom:0;
 left:0;
}

HTML

<div class="main_top">这里是顶部</div>
<div class="middle">
 <div class="main">
    网页上下固定，div高度自适应浏览器窗口测试
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    <p>123456789</p>
    </div>
</div>
<div class="footer">这里是底部</div>