html把div分成两栏,div+css制作上中下，中间两列的全屏⾃适
应布局
制作⾃适应布局的⽹页对初学者是个难点，今天我们以最常见的上中下结构，中间⼜分为两列的全屏⾃适应布局为例，教⼤家如何制作⾃适应布局⽹页。
上中下结构，中间⼜分为两列的全屏⾃适应布局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;}
css布局左边固定右边自适应
.g-ft{bottom:0;height:50px;}
以上就是《div+css制作上中下，中间两列的全屏⾃适应布局》的全部内容，⽤到了绝对定位、相对定位，中间部分左侧宽度300px，右侧使⽤相对定位left:300px和_margin-left:300px；保证和左侧的位置错开。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。