Html 如何在页面的最底部放置div？

我有一个简单的div

，我想把它放在页面的最底部。如果我这样做

position: absolute;
bottom: 0%;

然后它将自己定位在页面可见部分的底部，而不是实际的底部。如果我这样做了

position: relative;
bottom: 0%;

---

它只是停留在默认位置。如何将其放置在最底部？

如果要将其粘贴到浏览器窗口的底部，需要使用

位置：fixed

html

---

注意：如果你的正文内容足够长，你的页脚将在页面底部。如果内容足够短，它将粘在屏幕底部。

对于代码，div显示在主体底部，但问题是主体没有使用屏幕的所有高度。要解决这个问题，您必须更改“html”和“body”实体以使用所有高度

我认为这些CSS样式可以帮助：

html {
    height: 100%;
}

body {
    height: 100%;
    position: relative;
}

#footer {
    position: fixed;
    bottom: 0;

    /* Following styles let see the div to check it works */
    width: 100%;
    height: 50px;
    background: #036;
}

---

#页脚显示在底部的强制样式为“位置：绝对”和“底部：0”。其他属性可以用您想要的任何值进行修改。

您希望它始终粘贴在底部吗？我希望它位于整页的最底部。例如，如果页面的高度为5000px，那么无论我正在查看页面的哪个部分，页面顶部的高度都应为5000px。@t.niese可视部分指的是我在屏幕上看到的内容。如果我向下滚动50像素，那么可见部分将从页面顶部开始向下滚动50像素。我所说的实际底部是指可能看到的最低点。所以，如果我向下滚动到我能走的地方，那么我的屏幕底部会显示“实际底部”。这很奇怪，现在页脚比我的屏幕底部低几个像素，但它仍然远离页面底部。这对你有用吗？当我运行JSFIDLE时，页脚会放在屏幕的底部，但当我向下滚动时，页脚会随着页面的其余部分一起向上移动。对不起，我搞错了。您可以看到结果；）是否可以将页脚固定在主体底部，而不是可见屏幕？所以一开始你看不到它，但当你向下滚动时，它最终会显示在最底部？所以我认为@4dgaurav的例子是最好的解决方案，代码仍然只是将我的页脚放在屏幕底部，而不是页面。我无法想象为什么它可以在JSFIDLE上工作，但不能在我的应用程序上工作。。

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;
    /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    /* Height of the footer */
    background:#6cf;
}
/* other non-essential CSS */
 #header p, #header h1 {
    margin:0;
    padding:10px 0 0 10px;
}
#footer p {
    margin:0;
    padding:10px;
}

html {
    height: 100%;
}

body {
    height: 100%;
    position: relative;
}

#footer {
    position: fixed;
    bottom: 0;

    /* Following styles let see the div to check it works */
    width: 100%;
    height: 50px;
    background: #036;
}