如果頁面較短，則將HTML頁腳保留在窗口底部
[英]Keeping HTML footer at the bottom of the window if page is short
問題描述
我的某些網頁很短。 在這些頁面中，頁腳可能最終會出現在窗口的中間，而頁腳下方則是空白（以白色顯示）。 看起來很丑。 我希望頁腳位於窗口的底部，而有限的內容主體會被拉伸。
但是，如果網頁很長，並且您必須滾動查看頁腳（或其全部），那么事情應該會正常進行。
用CSS執行此操作的正確方法是什么？ 我需要Javascript / jQuery來實現嗎？
我只關心IE9 +和其他瀏覽器的現代版本。 頁腳的高度也可以在頁面之間變化，因此我不想依賴高度。
6 個解決方案
解決方案1
11 已采納 2012-11-12 18:33:56
看看這個網站 。 他有一個很好的教程，介紹如何使用CSS執行此操作。
我復制了他的css，以防萬一Matthew的網站被刪除。
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
編輯
由於頁腳的高度因頁面而異，因此您可以獲取頁腳的高度，然后使用javascript調整#body padding-bottom。 這是使用jquery的示例。
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
解決方案2
2 2012-11-12 18:37:49
給這一個嘗試。
它是Github用來將頁腳保留在頁面底部的樣式的副本。 這有點棘手，需要您知道頁腳的高度（這可能不適用於您的用例）
標記
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
CSS（嗯，scss）
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
這里重要的事情似乎是：
- 設置高度：100％包含元素（特別是
html和body） - 了解頁腳的高度，並使用“ push”元素進行說明
- 結合使用
min-heightheight: auto !important和height:100%
希望有幫助！
解決方案3
0 2015-12-07 22:54:24
的HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
的CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
解決方案4
0 2018-05-21 18:49:46
考慮到所有頁腳都位於<footer> html標記內，因此使用jQuery可以輕松解決此問題。
JS：
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS：
footer {
position:absolute;
bottom:0;
}
解決方案5
-2 2012-11-12 18:06:20
不，很容易為您設置身高的最小值。
像這樣：min-height：500px; 那么最小高度是500px。
解決方案6
-3 2012-11-12 18:10:45
使用min-height屬性，盡管並不完全可靠，因為某些舊版本可能不支持它。 如果您不介意，請添加一些JavaScript。
在水平滾動的站點上將頁腳保持在 window 的底部
[英]Keeping footer at the bottom of window on site that scrolls horizontal
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.