頁腳位置：頁腳未出現在頁面底部
[英]Footer Positioning: footer not appearing at the bottom of the page
問題描述
我試圖將頁腳放在每頁的最底部，但是這樣做很麻煩。 對於內容較長的頁面，頁腳可以完美地定位在底部，但對於內容很少的頁面，頁腳會突然放置在頁面的中間。 我附加了一個示例圖像，以使您看到某些頁面沒有將其放置在底部。 我的HTML和CSS的頁腳如下。 我嘗試使用position: fixed; 但這有使頁腳始終可見的不良影響； 我只想要它在每頁的最底部。 我該如何實現？
application.html.erb
<body>
<div class="clearfix">
<%= render :partial => 'layouts/header' %>
<div id="flash_messages">
<%- flash.each do |name, msg| -%>
<%= content_tag :div, msg, :id => "flash_#{name}" if msg && !msg.empty? %>
<%- end -%>
</div>
<%= content_tag(:div, " ", :class => "clear") unless flash.empty? %>
<%= yield %>
<footer>
<%= render :partial => 'layouts/footer' %>
</footer>
</div>
</body>
CSS
#footer {
position: static;
clear: both;
bottom: 0;
width: 100%;
background-color: #dddfe1;
}
2 個解決方案
解決方案1
2 2014-08-20 17:46:24
.clearfix {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
解決方案2
0 2014-08-20 17:48:43
我相信您正在尋找的實際上是這樣的：
#footer {
position: fixed;
clear: both;
bottom: 0;
width: 100%;
background-color: #dddfe1;
}
旁注：在頁腳上獲得多瀏覽器解決方案將面臨固有的困難（特別是如果您計划支持移動設備），因此研究此主題可能會非常有成果。
同樣，這也不是一個javascript或jquery問題，不要太挑剔，而只能添加與實際實現相關的標簽。
滾動頁腳底部定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.