位置绝对和底部0

Question

http://cdpn.io/FykHr 我似乎对组合的CSS属性存在问题：

position: absolute;
bottom: 0;

首先你可以看到.footer div不在底部。现在，将font-size从120px更改为50px，div似乎按照我的方式运作。

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

Answer 1

您需要将position: relative;添加到父容器，在本例中为.wrapper。

这是一个很好的参考page on absolute positioning。

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/

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