位置绝对和底部0

Question

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

position: absolute;
bottom: 0;

首先,您可以看到.footer div不在底部.现在,将font-sizefrom 更改为120px,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/

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