无js实现div高度自适应布局

时间 2019-11-13

原文原文链接

以前在项目发现写了好几行js就是为了控制div布局中的宽度和高度，让嵌套的iframe可以自动填满剩余的空间。这就让我很不爽了。由于我一直以为这个工做应该交给css才对啊。因而尝试着不用js来完成这个工做。css

<!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">&nbsp;</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>
<!-- 就是这么简单。 -->

固然，这个布局没有通过实践，在真实的项目中可能存在问题，好比和后续的必要样式发生冲突之类的，可是至少能够作为参考！html

那么就这样了！布局