無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

那麼就這樣了！佈局