使页脚正确粘贴到页面底部 [英] Make footer stick to bottom of page correctly

问题描述

我想让我的页脚（只是一个带有一行文本的div）在屏幕的底部，如果内容不会一直到底部，或在底部内容，如果内容需要滚动条。如果内容不需要滚动条，它可以完美地工作，但是当内容太长时，页脚仍然在同一位置，坐在内容的顶部。

I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.

我的基本div结构是：

My basic div structure is:

<div id="container">
    <div id="body"></div>
    <div id="footer"></div>
</div>

我的相应CSS（稍微下滑）：

My corresponding CSS (stripped down somewhat):

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

推荐答案

HTML来做你想要的：

You will need slightly more complex HTML to do what you want:

http：/ /ryanfait.com/sticky-footer/

这篇关于使页脚正确粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！