上下高度固定貼齊瀏覽器頭尾;中間高度自動調整為瀏覽器高度
左導覽列寬度與位置固定;右顯示內容填滿瀏覽器寬度
自己也調了很久,避免忘記先記起來
要達成此排版需有三個檔案:
index.html
index.css
index.js
index.html---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js"></script>
<title>測試</title>
</head>
<body onload="AutoSetHeight()" onresize="AutoSetHeight()">
<div id="header">
<!-- 頁首 -->
</div>
<div id="middle">
<!-- 這裡放導覽列 -->
<nav>
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
</nav>
<div id="content">
<!-- 網頁實際內容 -->
</div>
</div>
<div id="footer">
<!-- 頁尾(版權宣告,版本等) -->
</div>
</body>
</html>
index.css---
body{
margin: 0px; /* 邊界距離為零,表示該頁所有元素邊界皆為0 */
}
#header{
height: 30px; /* 自訂高度 */
background-color: #7CC1C5;
}
#middle{
overflow:hidden; /* 當內容超過元素寬度時隱藏 */
}
#middle nav{
height: inherit; /* 高度繼承父元素,搭配自動抓高度function使用 */
overflow-y:auto; /* 當內容超過元素高度時顯示捲動軸 */
float: left; /* 靠左浮動,並排必備 */
background-color:#E0DA63;
}
#content{
height: inherit; /* 高度繼承父元素,搭配自動抓高度function使用 */
overflow-y:auto; /* 當內容超過元素高度時顯示捲動軸 */
background-color:#fffaf3;
}
#footer{
height: 20px; /* 自訂高度 */
clear: both;
background-color: #888888;
}
index.js---
//抓取瀏覽器目前高度自動調整中間高度
function AutoSetHeight() {
var WinHeight = window.innerHeight;
var HeaderHeight = document.getElementById("header").clientHeight;
var FooterHeight = document.getElementById("footer").clientHeight;
var middle = document.getElementById("middle");
var BodyHeight = WinHeight - HeaderHeight - FooterHeight;
middle.style.height = BodyHeight + "px";
}
如此就能完成排版了