css - 绝对位置和底部 0

Question

http://cdpn.io/FykHr 我似乎对组合的 CSS 属性有疑问：

position: absolute;
bottom: 0;

首先，您可以看到 .footer div 不在底部。现在，将font-sizefrom120px更改50px为 div 似乎按照我的预期方式工作。

无论 .content div 的大小如何，如何使 .footer div 保持在底部（不固定在屏幕底部）。

Answer 1

您需要添加position: relative;到父容器，在这种情况下是.wrapper.

这是绝对定位的一个很好的参考页面。

Answer 2

有一种方法可以做到这一点：

body {
    height: 100%;
    margin: 0;
}
html {
    padding-bottom: 50px;
    min-height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: red;
}

http://jsfiddle.net/n8UNM/

还有一个限制。您必须知道页脚的高度并将其设置在两个地方。