Css 绝对位置和底部0

我似乎对组合CSS属性有问题：

position: absolute;
bottom: 0;

首先，您可以看到.footer div不在底部。现在，将

font size

从

120px

更改为

50px

，div的工作方式似乎与我输入的方式相同

---

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

您需要添加

位置：相对

到父容器，在本例中是

.wrapper

---

这里有一个很好的参考资料。

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

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;
}

---

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

在我的Firefox上，codepen网站（不是您的代码）不起作用。在Chromium上，你的代码工作正常，我无法重现你的问题。为我工作。无法将模式窗口延伸到页面底部。在

标记和magic上设置

位置：relative

。按要求工作：）我希望它不会对任何其他子元素产生影响。