僅當頁面“短”時才將頁腳放在底部
[英]place footer at bottom only if page is “short”
問題描述
我有一個有幾個頁面的網站。 每個頁面都有不同的高度（很明顯，但我提到了）。
我想要實現的是，如果頁面內容低於瀏覽器視口，則頁腳標簽將獲得固定位置並與頁面底部對齊。
我試過這個js：
$(function(){
if ($(document).height() > $("footer").offset().top+44) {
$("footer").addClass('fixbottom');
}
}
});
$(window).resize(function() {
if ($(document).height() > $("footer").offset().top+44) {
$("footer").addClass('fixbottom');
}
});
還有那個css：
.fixbottom {
width: 100%;
position: fixed;
bottom: 0;
}
footer {
height:44px;
background: #7abde9;
color: #ffffff;
text-align: center;
}
我的 jquery 中的 top+44 是因為我的頁腳標簽高度為 44，我使用了准備好的文檔並調整窗口大小以確保所有情況都應滿足，但不幸的是，這似乎在任何情況下都不起作用。
任何幫助都應該得到極大的幫助
9 個解決方案
解決方案1
11 已采納 2014-01-18 17:16:01
您不需要為此使用 javascript。
有一種方法叫做“ stickyfooter ”，它提供了一種讓頁腳始終位於底部的方法，即使內容不多。
這是一個簡單的例子：
html, body {
height:100%;
}
#wrapper {
position: relative;
min-height:100%;
}
#main {
padding-bottom: 44px;
}
footer {
height: 44px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
請參閱此小提琴以了解其工作原理。
解決方案2
3 2014-01-18 17:19:40
你只能用 CSS 來解決你的問題。
您的內容需要一個元素，下方的頁腳需要一個元素。
<div id="container">
<div id="content">
<div id="main">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
給 #content 一個 min-height 為 100% 並為 #footer 設置一個高度和反向 margin-top（與高度相同）。 為了保護#content 中的最后一個元素不被重疊，請設置一個margin-bottom。
#content {
min-height: 100%;
}
#footer {
height: 3em;
margin-top: -3em;
}
#main {
padding-bottom: 3em; /** height of #footer */
}
下面是一個例子：
Cameron Adams 寫了一篇關於您的問題的文章。 http://www.themaninblue.com/writing/perspective/2005/08/29/
解決方案3
2 2014-01-18 15:35:21
在普通的javascript中：
if (window.innerHeight > document.body.offsetHeight) {
// code to make the footer stick to bottom
}
解決方案4
2 2015-07-09 14:44:07
var shortContent = function() {
if($(window).height() > $('body').height()) {
$('footer').addClass('shortContent');
}
};
(function(){
shortContent();
$(window).resize(function() {
shortContent();
});
}());
簡化了 js 並使其在沒有太多 css 的情況下工作
@MichaB 你的代碼需要 jQuery m8
解決方案5
1 2015-09-30 14:56:42
<script>
function hideMe(id)
{
var box=document.getElementById(id);
box.style.display="none";
}
var bodyHeight=document.getElementById("body").offsetHeight,
windowHeight=window.innerHeight;
if(bodyHeight<windowHeight)
{
var footer= document.getElementById("footer");
footer.style.position="absolute";
footer.style.left="0px"
footer.style.top=windowHeight-footer.offsetHeight+'px';
footer.style.width='100%';
}
<script>
在 HTML 上，只需將 id="footer" 放在您的頁腳 div 中 .. 歡迎您
解決方案6
1 2020-12-01 20:22:43
2020 年可能的解決方案：將非頁腳內容包裝在標簽中，並將該標簽的最小高度設置為 100vh - 頁腳高度：
HTML：
<main>
<!--Page Content-->
</main>
<footer>
<!--Footer Content-->
</footer>
CSS：
main {
min-height: calc(100vh - <footer height>);
}
不需要 JavaScript/jQuery。
解決方案7
1 2021-02-18 18:21:43
我不喜歡包含所有內容的大包裝的想法，所以我找到了這個解決方案：
html {
position: relative; /*IMPORTANT: otherwise the footer aligns to the :root, which is 100vh*/
min-height: 100%; /*if the page is "short", the html takes it up completely anyway*/
}
body {
margin-bottom: 10rem; /*this is the height of the footer (if it is not fixed you can find a way using media queries*/
}
footer {
position: absolute;
bottom: 0;
height: 10rem; /*set whatever you want, but remember to keep it synced with the body*/
}
要記住的重要一點是， margin-bottom必須設置在body ，因為它的頁腳位於html標簽內，這是它的直接父級。
免責聲明：
我自己找到了這個解決方案，但我沒有檢查其他人是否在任何其他問題上找到了它......在這種情況下，請隨時在評論中引用它們！
解決方案8
0 2014-01-18 17:23:32
解決方案9
0 2021-08-26 17:52:55
使用 Flexbox 可以這樣實現：
HTML
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</body>
CSS
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
JSFiddle： https ://jsfiddle.net/wjcbpat3/
如何將頁腳放在頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.