全頁高度，帶有固定的頁眉和頁腳
[英]Full page height with fixed header and footer
問題描述
我正在開發一個具有固定頁眉和頁腳的站點。 我試圖在沒有足夠內容的情況下將我的內容顯示為整頁，而在有內容時仍然可以滾動。
到目前為止，我已經做到了這一點，但是在頁面末尾有一些額外的空間。 如何擺脫底部的多余空間？
這是一個jsFiddle： http : //jsfiddle.net/0yz9nx35/1/
正如您在小提琴中看到的那樣，頁面底部仍有一個滾動條顯示空白
我的代碼：
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS：
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
4 個解決方案
解決方案1
1 2015-03-18 13:12:37
您可以在包裝類上使用它：
height: calc(100% - 60px)
或者，您可以通過以下方式更改頁面的結構：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
解決方案2
1 已采納 2015-03-18 13:22:37
除去body {height:100%;}在wrapper上添加一些填充底部以補償固定的頁腳高度。 這是固定的小提琴：
解決方案3
0 2015-03-18 13:11:28
您可以添加overflow-y: hidden; 請刪除底部的滾動條。
解決方案4
0 2015-03-18 13:22:21
如果希望任何滾動條位於.content塊上，則可以嘗試以下操作。
您可以固定.content ，使頂部和底部邊緣分別位於頁眉下方和頁腳上方。
在這種方法中，您可能不需要.wrapper塊元素，除非您需要它來放置一些背景圖像。
html, body { height: 100%; margin: 0px; padding: 0px; } .wrapper { height: 100%; } .header { position: fixed; top: 0px; left: 0px; height: 60px; background-color: #333; width: 100%; } .footer { position: fixed; bottom: 0px; left: 0px; height: 50px; background-color: #333; width: 100%; } .content { position: fixed; top: 60px; bottom: 50px; left: 0px; background-color: beige; width: 100%; overflow: auto; }
<div class="wrapper"> <div class="header"></div> <div class="content"> Content goes here<br> and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br> the end. </div> <div class="footer"></div> </div>
如何在Bootstrap中將控件設置為全高度（帶滾動，固定頁眉/頁腳）
[英]How to style a control in Bootstrap to full height in mobile (with scrolling, fixed header/footer)
Header，頁腳和帶有內部頁腳和全高滾動條的可滾動內容
[英]Header, footer and scrollable content with inner footer and full height scrollbar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.