将页脚保持在页面底部

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

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

还有一个例子

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 个解决方案

解决方案1
4 2012-08-14 20:55:11

将页脚保持在页面底部

问题描述

1 个解决方案

解决方案1 4 2012-08-14 20:55:11

解决方案1
4 2012-08-14 20:55:11