Question

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

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

这可能是愚蠢的，但我无法弄明白......

提前致谢！

Answer 1

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

#body{ 
   min-height: 83%;
}

footer{
   position: static;
}

感谢大家帮忙！

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

固定页脚底部或文本下方的页脚

2 个答案: