页脚定位：页脚没有出现在页面底部答案

【问题标题】：Footer Positioning: footer not appearing at the bottom of the page页脚定位：页脚没有出现在页面底部
【发布时间】：2014-08-20 17:41:12
【问题描述】：

我正在尝试将页脚放置在每一页的最底部，但在这样做时遇到了麻烦。对于内容较长的页面，页脚完美地位于底部，但它会突然放置在内容较少的页面中间。我附上了一个示例图像，让您看到它没有被放置在某些页面的底部。我的页脚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;
}

【问题讨论】：

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

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

footer {
    position: absolute;
    bottom: 0;
}

【讨论】：

也不起作用。对于内容很少的页面，页脚位于中间。
这解决了小内容页面的问题，但对于需要向下滚动才能到达页脚的大页面，现在看起来不太好。位置会发生什么：绝对；是页脚被放置在“可见”页面的底部；当您向下滚动时，页脚会停留在那里，覆盖页面的内容！对于长页面，它不再位于最底部。
@msc 不要忘记将position: relative; 添加到父级！ jsfiddle.net/ofkscfdr
好的，所以我确实让它部分工作了。然而，页脚现在涵盖了重要的侧边栏内容。
这是不可接受的，因为它在我的网站上隐藏了很多有用的功能，即页脚只是覆盖了它下面的元素。

【解决方案2】：

我相信您正在寻找的实际上是这样的：

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

附注：为页脚获取多浏览器解决方案将面临固有的困难（特别是如果您计划支持移动设备），因此研究这个主题可能会非常有成果。

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

【讨论】：

不要太挑剔，但如果你读了我的问题，我已经说过我不想要 position: fixed; 的效果。带来。
对不起，应该是 position: absolute;编辑：你实际上需要 GINCHER 在下面提供的东西，如果你没有，由 by。位置：相对；为位置设置不同的坐标系：绝对；操作
这也不能解决原来的问题。对于内容很少的页面，页脚停留在页面中间，并且由于某种原因不会下降到底部。它还进一步将页脚放置在可滚动的大页面的中间。