將頁腳放在底部
[英]Keeping the footer at the bottom
問題描述
我有一個結構類似的頁面：
<div id="page">
<div id="content">
<h1>News:</h1>
<div class="body">
<div class="news">
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<p>stuffstuffstuff</p>
</div>
</div>
</div>
當內容不多時，它看上去還可以，但是當我添加更多文本時，頁腳開始奇怪地起作用，最終飛到頁面的中間。 我已經嘗試了一些發布在網絡上的解決方案，但是似乎沒有一個解決辦法，或者我做錯了什么。 無論如何，希望我能在這里找到一些幫助
4 個解決方案
解決方案1
4 已采納 2014-04-24 18:09:44
這是無需定位的粘性頁腳的最佳解決方案： http : //ryanfait.com/sticky-footer
HTML
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<!-- content -->
<div class="push"></div> <!-- This pushes the footer off -->
</div>
<div class="footer">
</div>
</body>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
解決方案2
1 2014-04-25 09:37:55
也許嘗試這樣的事情：
HTML
<div class="page-wrap">
<!-- HTML stuff -->
</div>
<footer class="site-footer">
<!-- Footer stuff goes here -->
</footer>
CSS
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
/* footer style */
}
解決方案3
0 2014-04-24 18:11:33
您可以在CSS中使用類似的內容
body{
padding-bottom: 40px;
}
#footer{
position: fixed; /* works fine on ios */
bottom:0;
left:0;
width:100%;
height: 40px;
}
解決方案4
0 2016-04-18 11:21:04
因此，我一直在嘗試將其用於我的Cookie通知欄，該通知欄通常位於頁面頂部（請參見http://www.corwouters.nl ），並設置了z-index的某種方式它放在一切之上，直到被解雇。 但對於iOS，我希望它位於底部。 因此，我偶然發現了另一個網站，該網站可以將其與純CSS一起使用，並且完全沒有JavaScript，因此，我將在這里與大家分享：
#sticktobottom {
position: fixed;
top: auto;
bottom: 0;
}
*將#sticktobottom替換為您要粘貼在底部的div，頁腳，跨度或其他元素的名稱。 我已經檢查了它，它似乎可以在所有主流瀏覽器，台式機和移動設備（包括iOS）上運行。 同樣在iOS上，滾動時它將堅持導航欄，這是所需的行為。
頁腳未保持在底部位置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.