Question

我试图将我的页脚放在每个页面的最底部，但是我很难这样做。对于内容较长的页面，页脚完全位于底部，但它会突然放在页面中间，内容很少。我附上了一个示例图片，让您看到它没有放在某些页面的底部。我的页脚的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, "&nbsp;", :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;
}

enter image description here

Answer 1

.clearfix {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

Answer 2

我相信你一直在寻找的是：

#footer {
    position: fixed;
    clear: both;
    bottom: 0;
    width: 100%;
    background-color: #dddfe1;
}

另请注意：您将面临将多浏览器解决方案应用于页脚的固有困难（特别是如果您计划支持移动设备），因此研究此主题可能会非常有成效。

另外，这不是一个javascript或jquery问题，不要过于挑剔，但请只添加与实际实现相关的标签。

页脚定位：页脚未出现在页面底部

2 个答案: