這是做項目時會遇到的經典佈局問題，首先交代下背景，然後給出一個具體的解決方案。
背景：一個高度固定的導航欄始終固定在視口的頂部，下面是一個高度固定的盒子，再下面是主要內容，它的高度會變化，但它有一個最小高度，且多數情況下都處於這個最小高度，頁面還有一個底部。我們希望：滾動條不要出現在導航欄，且多數情況下頁面不會出現滾動條，及所有內容都出現在視口上。下面是個簡單的示意圖。
我們先給出html的代碼結構：
<html>
<head><title>項目記錄</title></head>
<body>
<header class="header"></header>
<div class="container">
<div class="sureH"></div>
<div class="mainCon"></div>
<footer class="footer"></footer>
</div>
</body>
<ml>
根元素
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow-y: hidden;
}
這樣做的目的是讓html佔滿整個視口，與此同時，y方向超出的話就隱藏
固定導航欄
.header {
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
}
我們需要注意的是,fixed定位的元素要指定寬高，top和left的值默認爲0，但最好還是指定一下。如果我們想要這個導航欄隨瀏覽器窗口縮放進行適配，那就要根據導航欄內部的內容進行規定，當寬度小於多少時，把某些內容隱藏或者摺疊起來。因爲進行fixed定位的元素寬度若超出視口寬度，超出部分就會被隱藏，不會隨頁面的寬度滾動條出現
最外層的容器
.container {
height: calc(100% - 80px);
margin-top: 80px;
overflow-y: auto;
}
這個容器高度的百分比是針對於父級的，也就是我們的body，我們讓它margin-top: 80px避開了導航欄，然後讓它的高度佔滿剩下的全部。如果內容超出這個高度就會自動產生滾動條。這樣滾動條就不會出現在導航欄上了。
固定高度的內容
.sureH {
height: 100px;
}
底部
.footer {
height: 100px;
}
主要內容
.mainCon {
min-height: calc(100% - 200px);
}
我們爲了讓底部大多數情況下都恰好固定在視口底部，給它設置一個min-height，是用它父級的高度（100%）減去上面固定的高度和底部的高度。
OK,Over!
通常情況下，瀏覽器自帶的滾動條都特別醜，想要好看的滾動條請移步關於滾條的選擇器。