如何将 div 放置在页面的最底部？答案

【问题标题】：How can I position a div at the very bottom of the page?如何将 div 放置在页面的最底部？
【发布时间】：2015-02-16 22:22:14
【问题描述】：

我有一个简单的 div <div id="bottom"></div>，我想将它放在页面的最底部。如果我这样做了

position: absolute;
bottom: 0%;

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

position: relative;
bottom: 0%;

它只是停留在其默认位置。我怎样才能把它放在最底部？

【问题讨论】：

您希望它始终粘在底部吗？
stackoverflow.com/questions/9750265/…
我希望它位于整页的最底部。因此，例如，如果页面高 5000 像素，则无论我正在查看页面的哪个部分，它都应该距页面顶部 5000 像素。
@t.niese 可见部分是指我可以在屏幕上看到的部分。如果我向下滚动 50 像素，那么可见部分将从页面顶部向下 50 像素开始。我所说的实际底部是指可以看到的最低点。因此，如果我尽可能向下滚动，屏幕底部将显示“实际底部”。

标签： html css position positioning absolute

【解决方案1】：

如果你想让它粘在浏览器窗口的底部，你需要使用position: fixed。

【讨论】：

【解决方案2】：

Demo

html

<div id="container">
    <div id="header">
        <!-- Header start -->
        <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
        <!-- Header end -->
    </div>
    <div id="body">
        <!-- Body start -->
        <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal.</p>
        <!-- Body end -->
    </div>
    <div id="footer">
        <!-- Footer start -->
        <p><strong>Footer</strong> (always at the bottom).</p>
        <!-- Footer end -->
    </div>
</div>

css

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

注意：如果您的正文内容足够长，您的页脚将位于页面底部。如果内容足够短，它将停留在屏幕底部。

【讨论】：

该代码仍然只是将我的页脚放在屏幕底部，而不是页面。我无法想象为什么它可以在 jsfiddle 上工作，但不能在我的应用程序上工作..

【解决方案3】：

使用您的代码，div 出现在 body 的底部，但问题是 body 没有使用屏幕的所有高度。要解决这个问题，您必须更改 '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;
}

#footer 使其显示在底部的强制样式是“位置：绝对”和“底部：0”。其他属性可以修改为任何你想要的值。

【讨论】：

这很奇怪，现在页脚在我的屏幕底部下方几个像素处，但距离页面底部还很远。
这对你有用吗？当我运行 jsfiddle 时，页脚位于屏幕底部，但是当我向下滚动时，页脚会随着页面的其余部分向上移动。
对不起，我弄错了。你可以看到结果here ;)
是否可以将页脚固定到正文底部，而不是可见屏幕？所以一开始你是看不到它的，但是当你向下滚动时，它最终会在最底部显示出来？
所以我认为@4dgaurav 的例子是最好的解决方案