Question

当我使用bottom:0;时，如果我没有足够的内容，则页脚应该是应该的位置但是如果我有内容，用户必须在页面上滚动，则页脚保持原位并且一旦滚动，页脚位于屏幕中间。

当我不使用bottom:0;并且我确实有填充屏幕的内容时，页脚应该是它应该的位置，但是如果我没有足够的内容，页脚就不应该在哪里以及页面中间的某个地方。

它们都有效，但只有在满足某些条件时才有效。如何将它始终放在底部应该是内容还是没有内容？

.footer{
    background-color:#99C;
    background-repeat: repeat;
    width:100%;
    position:absolute;
    bottom:0;
}

html,body{ 
    padding:0;
    height:100%;
    width: 100%;
    margin:0;
}

Answer 1

在这里，试试这个website，它解释了如何做到这一点。

另外，一个例子

HTML：

<html>
    <head></head>
    <body>
        <div id="container">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
    </body>
</html>

CSS：

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

div#container {
    position:relative;
    margin:0 auto;
    width:750px;
    height:auto !important;
    height:100%;
    min-height:100%;
}

div#header {
    height:150px;
    background-color:red;
}

div#content {
    padding-bottom:150px;
    height:800px;
    background-color:green;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:150px;
    background-color:blue;
}

JSFiddle：http://jsfiddle.net/gdy8K/

请注意，#header和#content高度只是让div使用一些空间。但#footer空间是必要的，应与#content padding-bottom匹配。 background-color也只是为了演示。

您还应注意，如果您使用的是asp.net，请不要忘记您的内容通常位于form标记中。您必须在第一个css规则中添加form，例如

html,body,form {
    margin:0;
    padding:0;
    height:100%;
}

将页脚保持在页面底部

1 个答案: