之前在项目发现写了好几行js就是为了控制div布局中的宽度和高度,让嵌套的iframe能够自动填满剩余的空间。这就让我很不爽了。因为我一直觉得这个工作应该交给css才对啊。于是尝试着不用js来完成这个工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div布局</title>
<style type="text/css">
*{margin:0;padding:0;}
html, body {
height: 100%;/*html,body 高度设置100%,不然body内部元素高度设置100%是无效的*/
}
.header {
height: 100%; /*头部高度也设置成100%,不要急*/
margin-bottom: -30px;/*边框底部设置负的30px,这是用来留给footer的高度 =footer.height*/
}
/*真正的头部header*/
.nav {
height: 80px;
background: #999;
}
.footer {
height: 30px;/*设置footer的高度*/
background: #999;
}
/*主体内容设置绝对定位 top是头部的高度, bottom是底部的高度*/
.main {
position: absolute;
top: 80px;
bottom: 30px;
left: 0;
right: 0;
}
.left, #openClose {
float: left;
height: 100%;
}
.left {
width: 200px;
background: #fe4500;
overflow: hidden;
}
#openClose {
width: 4px;
background: #ccc;
}
.right {
height: 100%;
overflow: hidden;
}
/*
注意,left right一定要设置overflow:hidden;height:100%;
不然如果内部元素高度超过了,还是会导致滚动条出现的
*/
</style>
</head>
<body>
<div class="header">
<div class="nav">我是头部</div>
</div>
<div class="main">
<div class="left">我是左侧导航栏</div>
<div id="openClose" class="close"> </div>
<div class="right">
<iframe id="cmsMainFrame" name="cmsMainFrame" src="cmsMainFrame.html" scrolling="yes" frameborder="no" width="100%" height="100%">
</iframe>
</div>
</div>
<div class="footer">我是底部</div>
</body>
</html>
<!-- 就是这么简单。 -->
当然,这个布局没有经过实践,在真实的项目中可能存在问题,比如和后续的必要样式发生冲突之类的,但是至少可以做为参考!
那么就这样了!