我是侧边信息
我的上下左右都是自适应的,我的兼容性兼容 IE 的低版本浏览器哦!!!!(经典布局哦!!)
* { margin:0; padding:0; } html,body,.wrap { width:100%; height:100%; } .header { width:100%; height:80px; background-color:#00c1de; /* 下面的内容可以自行删除 */ font-size:30px; color:#fff; font-weight:700; line-height:80px; text-align:center; } .content { position:absolute; /* 这里的 top 值和 header 的高度一致 */ top:80px; bottom:0; width:100%; background-color:#f0f0f0; } .side,.content-wrap { float:left; } .side { /* 提升层级 */ position:relative; width:260px; height:100%; } .content-wrap { width:100%; margin-left:-260px; height:100%; } .content-inner { margin-left:260px; height:100%; background-color:#fff; } /* 可自行删除 */ .side span,.content-inner span { display:block; padding-top:30px; font-size:30px; text-align:center; }
在一些在给政府,一些企业做项目时,总是要兼容到 ie8 导致布局,这套简单的代码可以自适应,上下左右自适应,适用于老项目,政府企业的布局。如有不对的地方请大家提出,谢谢。