在页面底部或文本下方固定页脚[重复]答案

【问题标题】：Fixed footer on the bottom of the page or below the text [duplicate]在页面底部或文本下方固定页脚[重复]
【发布时间】：2014-02-09 16:33:21
【问题描述】：

我想在我的网站上制作一个粘性页脚。它必须位于页面底部，或者当添加更多文本时，它必须位于文本下方。我已经看过其他一些问题，但我似乎无法用这些答案来解决它

这是我的代码：http://jsfiddle.net/9XjLL/

HTML：

<body>
    <div id="header">
        This is the header
        <hr>
    </div>

    <div id="menu">
        <br>
        <b>Menu</b><br>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
        <br>
    </div>
    <div id="body">
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> end </p>
    </div>
</body>
<footer>
    Footer
</footer>

CSS：

html, body { 
    height:         100%; 
    background:     #E6E6E6;
    margin:         0;
    padding:        0;
}

#header {
    text-align:     center;
    height:         50px;
    position:       static;
    top:            0px;
    z-index:        15;
    background:     #B2B2B2;
}

#body{
    text-align:     left;
    margin-left:    210px;
    margin-right:   200px;
    margin-bottom:  5px;
    background:     #B2B2B2;
}

#menu {
    width:          200px;
    text-align:     left;
    left:           0px;
    position:       absolute;
    background:     #B2B2B2;
}

footer {
    text-align:     center;
    height:         30px;
    position:       relative;
    bottom:         0; 
    width:          100%;
    background:     #B2B2B2;
}

这可能是一些愚蠢的事情，但我无法弄清楚......

提前致谢！

【问题讨论】：

你有没有机会看看 Ryan Fait 的Sticky Footer？
在这里查看我的答案：http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880
以下链接可能会帮助您解决此问题。 [页脚 css 位置][1] [1]: stackoverflow.com/questions/21155833/footer-position-issue-css/…

标签： css html containers footer

【解决方案1】：

我找到了一种解决方案。我添加/更改了以下几行：

#body{ 
   min-height: 83%;
}

footer{
   position: static;
}

感谢大家的帮助！

【讨论】：

【解决方案2】：

您可以参考下面的内容。

body{
   margin:0px;
   background:#000;
}
.footer-cont {
   width:100%;
   position:fixed;
   bottom:0px;
}
.footer {
   height:50px;
   background:#F0F0F0;
   border:1px solid #CCC;
   width:960px;
   margin:0px auto;
}
.content {
   width:960px;
   background: #F0F0F0;
   border: 1px solid #CCC;
   height: 2000px;
   margin: 70px auto;
}

【讨论】：