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>