我不能讓這個頁腳留在頁面的最底部

-1

因此，我正在製作一個網站，無論我做什麼，我都無法讓我的頁腳以我想要的方式行事，我希望它在非常底部的頁面（不浮動），所以如果有一個頁面充滿內容不能看到。我嘗試了很多東西，並且四處尋找，但找不到我需要的答案，對不起，如果這是重複的。這是我的CSS代碼，以及我的HTML結構。我不能讓這個頁腳留在頁面的最底部

這是我的CSS：

footer { 
bottom: 0; 
height: 10%; 
min-height: 75px; 
left: 0; 
position: absolute; 
width: 100%; 
text-align: center; 
background: #CAA400; 
vertical-align: middle; 
color: #232323; 
}

這是我的HTML（結構）：

<head> 
</head> 
<body> 
    <div> 
    lots of random stuff 
    </div> 
<footer id="foot"><p></p></footer> 
</body>

我使用position: fixed，absolute，relative，很多東西試過，但我似乎無法到想辦法。我認爲這可能是一個問題，也許在我的CSS中的父容器，但我不知道，任何額外的輸入也將是有益的，謝謝。

來源

2016-05-31 Twtheo

谷歌粘頁腳 –

可能的複製[你怎麼頁腳留在底部的網頁？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page） – jmoerdyk

由於您沒有在標籤中添加Javascript，因此我不會發布我的答案。用JS的小菜一碟。 –

好，這裏是片段 -

<div id="content"> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
</div> 
<footer id="foot"><p></p></footer>

我已經添加了一個ID爲conten噸。然後我使用JS來檢測它的高度並根據需要設置頁腳的屬性top屬性。

var top = $('#content').height(); 
if(top > $(window).height()) { 
    $('#foot').css('top', top+'px'); 
}

您的其餘CSS保持不變。

這裏是樣品 -

https://jsfiddle.net/v7tvxcxc/

https://jsfiddle.net/v7tvxcxc/1/

檢查這兩個小提琴。第一個是內容高度低於窗口高度。第二個恰恰相反。

來源

2016-05-31 20:28:31

我試過這個，它似乎卡住了，當頁面第一次加載時，它在底部，當我滾動它時，它最終移動到頁面中間。 – Twtheo

@Twtheo你試過自己的結局？在小提琴中它是如你所願地工作？ –

當你想選擇html標籤/ s使用document.querySelector（）。因爲你已經給它一個id，所以在你的css文件中，你需要通過id來選擇元素。如果這沒有幫助，請在高度上使用％。現在它的高度也達到了100％，它應該是反應迅速的。

#foot { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
}

例如：

navbar {height: 10%} 
 
body {height: 80%} 
 
footer {height: 10%}

來源

2016-05-31 20:16:38 DevBear15

如果您可以爲標記添加一個間隔符，您可以將主體的最小高度設置爲100vh，然後絕對定位頁腳。不要忘記你需要position:relative;身體，使一切正常流動！

footer { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
} 
 
#foot_spacer{ 
 
    height: 10%; 
 
    min-height:75px; 
 
} 
 
body{ 
 
    min-height:100vh; 
 
    box-sizing:border-box; 
 
    position:relative; 
 
    margin:0; 
 
}

<body> 
 
    <div> 
 
    lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff 
 
    </div> 
 
    <div id='foot_spacer'></div> 
 
<footer id="foot"><p></p></footer> 
 
</body>

我還建議調整頁腳（和間隔）高度10vh，而不是10％這麼一個很長的文章不給你了那座頁腳。

它更容易上的jsfiddle大小打得這麼試試這裏也

小提琴一點：https://jsfiddle.net/trex005/v8rct2ue/

來源

2016-05-31 20:59:49 trex005

我不能讓這個頁腳留在頁面的最底部

回答

相關問題