将页脚保持在页面底部

Question

When I use bottom:0; 当我使用bottom:0; , if I don't have enough content the footer is where it should be but if I have content that the user has to scroll on the page, the footer stays in place and once scrolled, the footer is in the middle of the screen. 如果我没有足够的内容，则页脚应该是应该的位置，但如果我有内容，用户必须在页面上滚动，页脚保持在原位，一旦滚动，页脚就在屏幕的中间。

When I don't use bottom:0; 当我不使用bottom:0; and I do have content that fills the screen, the footer is where it should be, but if I don't have enough content, the footer is not where it should be and somewhere in the middle of the page. 我确实有填充屏幕的内容，页脚应该在哪里，但如果我没有足够的内容，则页脚不应该位于页面中间的某个位置。

They both work but only when certain conditions are met. 它们都有效但只有在满足某些条件时才有效。 How can I have it always at the bottom where it should be with content or without? 如何将它始终放在底部应该是内容还是没有？

.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

Here, try this website , it explains how to do it. 在这里，试试这个网站，它解释了如何做到这一点。

Also, an example 还有一个例子

HTML : HTML：

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

CSS: 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/ JSFiddle： http ： //jsfiddle.net/gdy8K/

Note that the #header and #content height are simply there to make the div use some space. 请注意，＃ #header和#content高度只是为了使div使用一些空间。 The #footer space though, is necessary and should match the #content padding-bottom . #footer空间虽然是必要的，但应与#content padding-bottom匹配。 background-color are also there only for the sake of the demonstration. background-color也只是为了演示。

You should also note that if you are using asp.net, do not forget that your content usually is in a form tag. 您还应该注意，如果您使用的是asp.net，请不要忘记您的内容通常位于form标签中。 You'll have to add form in the first css rule, like this 你必须在第一个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