Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

兼容IE 8 的自适应布局(上下左右自适应)

在一些在给政府,一些企业做项目时,总是要兼容到 ie8 导致布局,这套简单的代码可以自适应,上下左右自适应,适用于老项目,政府企业的布局。如有不对的地方请大家提出,谢谢。

0