Footer Positioning: footer not appearing at the bottom of the page
Question
I am trying to position my footer at the very bottom of every page, but am having trouble doing so. The footer gets positioned perfectly at the bottom for pages with long content, but it gets placed abruptly in the middle of pages with little content. I have attached a sample image to let you see that it is not getting placed at the bottom for some pages. My html and css for the footer is below. I tried using position: fixed; but that had the unwanted affect of making the footer visible at all times; I only want it at the very bottom of every page. How can I achieve that?
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 answers
solution1
2 2014-08-20 17:46:24
.clearfix {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
solution2
0 2014-08-20 17:48:43
I believe what you're looking for is actually this:
#footer {
position: fixed;
clear: both;
bottom: 0;
width: 100%;
background-color: #dddfe1;
}
side note: you will face inherent difficulty with getting a multi-browser solution to a footer (particularly if you plan to support mobile devices), so researching this topic may prove quite fruitful.
also, this is not a javascript or jquery question, not to be too picky, but please only add tags that are relevant to the actual implementation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.