這是我的代碼：如何強制我的頁腳粘貼到CSS中任何頁面的底部？
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
我不知道什麼是錯的這一點 - 任何人都可以幫忙嗎？
編輯：對於一些更清晰的錯誤：當頁面加載時，頁腳在底部顯示爲預期。但是，當網頁的高度大於屏幕上的尺寸以使滾動條出現時，頁腳停留在同一位置。也就是說，當頁面的高度爲< = 100％時，頁腳位於底部。但是，當頁面高度> 100％時，頁腳不在該頁面的底部，而是在可見屏幕的底部。
編輯：令人驚訝的是，沒有下面的解決方案工作。我最終實現了側邊欄。
你可能尋找this example：
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
對於142像素頁腳
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
變高度頁腳怎麼樣？ – 2017-01-09 19:33:09
@DustinGraham：您需要使用flex，並將滾動條移動到內容 – SLaks 2017-01-09 20:31:36
的包裝是你的頁面的其餘部分。負值/正值的邊際/高度值是魔術發生的地方。
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}
請勿使用position：absolute;因爲頁面高度會發生變化。如果它是絕對的，那麼頁腳不會隨頁面高度移動。
你想使用ryan fait的方法。
雖然我會親自這樣做，
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
這樣您就不必亂用負邊距和填充。這也可以很容易地改變HTML5 #footer的一部分，以
<footer>
</footer>
您從哪裏獲得300px和600px？不是很通用的解決方案 – SummerBreeze 2014-05-19 16:08:45
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
試試這個：
position: fixed;
bottom: 0;
這將把頁腳放在窗口的底部，但不在頁面的底部（如果頁面高於窗口）... – severin 2015-07-15 14:46:37
爲什麼不使用jQuery？
在頁眉和頁腳之間放置一個包裝div，併爲jquery的包裝指定min-height屬性，與文檔高度和（頁眉高度+頁腳高度）之間的差異相等。
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $('header').height(); //header height
var fh = $('footer').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>
這就是我所做的，它導致我的頁腳停留在底部。
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
這也爲我工作....
我在努力尋找解決辦法，因爲沒有建議實現我想要的東西：
這是對我工作：
HTML：
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
CSS：
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Here在行動。
[This answer]（http://stackoverflow.com/a/ 26090114/5802289）走向相同的方向，並更好地解釋。 – J0ANMM 2017-02-17 22:31:21
我有同樣的問題，來這裏尋找答案，並沒有找到它，然後試圖對我自己的一些實驗，終於得到了解決：
#body {
overflow-y: 0 auto;
}
#footer {
color: #fff;
background-color: rgba(0,0,0,0.6);
position: fixed;
padding: 10px;
top: 100vh;
margin-top: -100px;
width: 100%; height: 100px;
}<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
<span>Some dummy Text</span>
</div>
爲什麼？怎麼了？ – SLaks 2011-04-01 17:46:54
重複[如何讓頁腳停留在網頁底部？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-網頁底部） – Phrogz 2011-04-01 17:50:34
SLaks說的是：這是一個糟糕的問題，因爲你沒有描述你想要的結果和你得到的結果。你寫的是有效的CSS代碼，這就是我所能告訴你的。另外，如上所述，這個問題以前已經被提出並回答過。 – Phrogz 2011-04-01 17:51:30