如何将页脚保持在页面底部？

Question

如何将页脚保持在页面底部？

5

CSS

 * {
     margin: 0px;
     padding: 0px;
 }
 html {
     margin: 0px;
     padding: 0px;
 }
 body {
     line-height: 1;
     margin: 0px;
     padding:0px;
     background:url("../images/22.jpg") scroll center top #16202C;
     /*  box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
    -webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
    -moz-box-shadow:  0 0 225px rgba(0, 0, 0, 0.45) inset;
-o-box-shadow:  0 0 225px rgba(0, 0, 0, 0.45) inset; */
     color: #464646;
     font: 13px/17px arial, sans-serif;
     min-width: 1300px;
 }
 #wrapper {
     margin: 0px;
 }
 #header {
     height: 40px;
     width: 100%;
 }
 #bodyWrapper {
     width: 980px;
     margin: 0px auto;
     position: relative;
     z-index: 2;
     -webkit-box-shadow: 0px 0px 2px #000 outset;
     -moz-box-shadow: 2px 0px 2px #000 outset;
     box-shadow: 20px 0px 2px #000 outset;
 }
 #bodyDiv {
     min-height: 550px;
     height: 100%;
     background:#fff;
     padding:20px 10px;
 }
 #footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: relative;
     width: 100%;
     z-index: 1;
 }

HTML

<body>
    <div id="topHeaderBar"></div>
    <div id="wrapper">
        <div id="bodyWrapper">
            <div id="header">
                <jsp:include page="menu.jsp"></jsp:include>
            </div>
            <div id="bodyDiv" style="position: relative;">body content</div>
            <div id="footer">
                <jsp:include page="footer.jsp"></jsp:include>
            </div>
        </div>
</body>

请帮我，我无法将页脚调整到页面底部。
当主体内容较少时，页脚将向上移动，并且#bodyDiv中的min-height:550px会在不同的屏幕分辨率下产生问题。

- Arvind Jhajhria

最佳解决方案 http://www.cssstickyfooter.com/ - designtocode

4

检查粘性页脚：http://ryanfait.com/sticky-footer/ - achudars

3

如果您使用 position: fixed 并向下滚动，则页脚将保持在其原位置，因此如果您向下滚动页面，始终会在屏幕中间看到页脚。请注意，该方式只是固定页脚的一种方法。 - Kees Sonnema

https://dev59.com/FXA75IYBdhLWcg3wJFqY - Dan

请将页脚正确地固定在页面底部 - Trikaldarshiii

显示剩余2条评论

3个回答

1

HTML

 <div id="topHeaderBar"></div>
        <div id="wrapper">
            <div id="bodyWrapper">
                <div id="header">
                    <jsp:include page="menu.jsp"></jsp:include>
                </div>
                <div id="bodyDiv" style="position: relative;">body content</div>
                <div id="footer">
                    <jsp:include page="footer.jsp"></jsp:include>
                </div>
            </div>

CSS：

 html,body{
        height: 100%
    }

    #header{
        background-color: yellow;
        height: 100px;
        width: 100%;
    }

    #holder {
        min-height: 100%;
        position:relative;
    }

    #body {
        padding-bottom: 100px;
    }

    #footer{
        background-color: lime;
        bottom: 0;
        height: 100px;
        left: 0;
        position: absolute;
        right: 0;
    }

- Divya Bhaloidiya

Divya，我不想要固定页脚，只是希望在页面内容较少时将页脚设置在浏览器窗口底部。谢谢你的帮助。 - Arvind Jhajhria

这是你需要的示例：http://jsfiddle.net/ELUGc/ 和 http://jsfiddle.net/ELUGc/1/，如果你有任何问题，请让我知道。 - Divya Bhaloidiya

我很感谢你的回答，但是我已经使用了上述提到的HTML布局，对我来说不可能改变它。你能否修改我上面给出的代码和CSS，使其能够正常工作？ - Arvind Jhajhria

请使用 http://jsfiddle.net/ELUGc/ 这个链接。 - Divya Bhaloidiya

使用上述编辑过的代码，它肯定可以正常工作。 - Divya Bhaloidiya

1

#footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: absolute;
     width: 100%;
     z-index: 1;
     clear:both;
 }

- Abhishek Jain

抱歉，无法正常工作。 - Arvind Jhajhria

抱歉让你工作了，试试这个，在我的端上可以运行。看看我修改后的答案。 - Abhishek Jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohammad Mahdi Naderi · Accepted Answer

试试这个：

 #footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: fixed;
     bottom:0;
     width: 100%;
     z-index: 1;
 }