绝对位置和底部 0答案

【问题标题】：Position Absolute and Bottom 0绝对位置和底部 0
【发布时间】：2026-02-08 09:40:01
【问题描述】：

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

position: absolute;
bottom: 0;

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

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

【问题讨论】：

在我的 Firefox 上，codepen 网站（不是您的代码）不起作用。在 Chromium 上，您的代码有效，但我无法重现您的问题。

标签： css

【解决方案1】：

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

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

【讨论】：

为我工作。无法将模态窗口拉伸到页面底部。在<body> 标签和魔法上设置position: relative。

【解决方案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/

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

【讨论】：

按要求工作 :) 我希望它对任何其他子元素没有影响。