绝对定位页脚的正确方法答案

【问题标题】：Proper way for absolutely positioned footer绝对定位页脚的正确方法
【发布时间】：2014-04-30 03:40:10
【问题描述】：

我将页脚放在页面底部

position:absolute;
bottom:0;

但是对于太“低”的页面（html 的height 很小），页脚和窗口底部之间有空间。我通过为html 元素设置min-height 来修复它，我认为这是一个丑陋的解决方案。百分比在这里行不通。理想情况下，html 的 min-height 应该是我猜的窗口高度。我可能可以用 Javascript 来解决这个问题，但这似乎也过于复杂了。

所以我删除了body{position:relative;} 以将页脚绝对定位到窗口，但这对于“高”页面来说更糟糕。效果见this fiddle。

还有更优雅的替代方案吗？我确实不想使用position:fixed;，因为这会导致页脚始终可见在大多数情况下，我发现这浪费了窗口空间。如果有人有建议，请随时编辑小提琴。

【问题讨论】：

Sticky Footer - 这是你要找的吗？
我不明白...如果您不想修复它，为什么不把它放在最后？
@Ruddy：是的，这就是我们想要的效果。我确实觉得.page-wrap 不是很语义化，整个事情需要相当多的 CSS。
@RubenGeert 据我所知，这是最好的方法。需要添加的就这么多。
@Ruddy：我想我找到了一个更好的。见下文。

标签： css position

【解决方案1】：

感谢您的建议，他们让我走上了正轨。我认为诀窍是

html{
    height:100%;
}

body{
    position:relative;
    min-height:100%;
}

这实现了预期的效果没有非语义.wrapper div's。有关演示，请参阅 here。

在某些情况下，在页脚之前的元素上需要一些padding-bottom，以免被页脚遮挡。

更新

我想我找到了final solution：

body{
margin-bottom:50px;
}

结合

.footer{
position:absolute;
bottom:-50px;
}

将使用干净的 CSS 和语义标记为页脚之前的所有内容创建空间和边距。

【讨论】：

+1 我正要给出同样的答案（这里有一个更易读的演示：）jsbin.com/jahug/1/edit
@RokoC.Buljan 不起作用，请阅读我的 cmets 问题。这是您的演示也无法正常工作DEMO，关闭但不起作用。
在页脚之前的最后一个元素上设置一些padding-bottom 将fix it。在某些情况下，这可能会引发新的并发症。这个修复是否是一个好的解决方案有点取决于最后一个元素的样式。
@RubenGeert 我认为最好的选择是使用粘性页脚。
我认为粘性页脚的标记和 CSS 都不是很干净或语义化。我想我真的更喜欢微小的padding-bottom“hack”。如果启用了 Javascript，那么使用 jQuery 的 prev() 方法也可以很容易地获取页脚之前的元素，并使用 css('padding','3em'); 或其他东西应用填充。

【解决方案2】：

用父级div 包装ul 列表并使其高度：100%；

而且标题不需要top:0。

.footer{
  bottom:0;
  position:absolute;
}

Updated DEMO

【讨论】：

OP说1200很丑，footer应该： 1：如果页面内容不多，放在底部； 2：如果有很多内容 - 保持低于该内容。
你编辑的不好，看看有很多内容怎么办jsbin.com/conilohe/3/edit
有没有办法避免非语义.wrapper div's？

【解决方案3】：

您需要在底部布局中使用页脚。试试我的示例代码

HTML

<body>
    <div id="wrapper">
        <div class="w1">
            <p>content of the page</p>
            <p>content of the page</p>
            <p>content of the page</p>
            <p>content of the page last</p>
        </div>
    </div>
    <div id="footer">footer content</div>
</body>

CSS

html,
body{
    height:100%;
    margin:0;
}
#wrapper{
    background:#000;
    min-height:100%;
    width:100%;
    margin:0 auto;
}
.w1{
    background:#f00;
    padding-bottom:50px; /* footer height */
}
#footer{
    background:#ff0;
    position:relative;
    width:100%;
    height:50px;
    margin-top:-50px; /* footer height */
}

【讨论】：