我是侧边信息
我的上下左右都是自适应的,我的兼容性兼容 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 导致布局,这套简单的代码可以自适应,上下左右自适应,适用于老项目,政府企业的布局。如有不对的地方请大家提出,谢谢。