制作自適應布局的網頁對初學者是個難點，今天我們以最常見的上中下結構，中間又分為兩列的全屏自適應布局為例，教大家如何制作自適應布局網頁。

上中下結構，中間又分為兩列的全屏自適應布局HTML代碼：

上中下結構，中間又分為兩列的全屏自適應布局

/* 全屏自適應布局? */

html,body{width:100%;height:100%;overflow:hidden;margin:0;}

html{_height:auto;_padding:100px 0 50px;}

.g-hd,.g-sd,.g-mn,.g-ft{position:absolute;left:0;}

.g-hd,.g-ft{width:100%;}

.g-sd,.g-mn{top:100px;bottom:50px;_height:100%;overflow:auto;}

.g-hd{top:0;height:100px;}

.g-sd{width:300px;}

.g-mn{_position:relative;left:300px;right:0;_top:0;_left:0;_margin-left:300px;}

.g-ft{bottom:0;height:50px;}

以上就是《div+css制作上中下，中間兩列的全屏自適應布局》的全部內容，用到了絕對定位、相對定位，中間部分左側寬度300px,右側使用相對定位left:300px和_margin-left:300px;保證和左側的位置錯開。

125jz網原創文章。發布者：江山如畫，轉載請注明出處：http://www.125jz.com/2434.html

總結

以上是生活随笔為你收集整理的html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。