1

当我使用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;
}
4

1 回答 1

4

在这里，试试这个网站，它解释了如何去做。

还有一个例子

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标签中。您必须form像这样添加第一个 css 规则

html,body,form {
    margin:0;
    padding:0;
    height:100%;
}
于 2012-08-14T20:55:11.393 回答