在页面底部保留页脚

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

来源

2012-08-14 user1455112

您是否尝试过这样的：http://www.cssstickyfooter.com/？ – j08691 2012-08-14 20:52:09

修复了它。谢谢！ – user1455112 2012-08-14 21:13:38

在这里，试试这个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空间是必要的并且应该与#contentpadding-bottom相匹配。 background-color也只是为了演示。

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

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

来源

2012-08-14 20:55:11 Shadowxvii

请在此处添加相关信息。这样，即使链接失效，您仍然可以获得有效的答案。 – PeeHaa 2012-08-14 20:56:50

对不起。我添加了一个示例代码。 – Shadowxvii 2012-08-15 14:14:27

@shadownxvii谢谢！ – PeeHaa 2012-08-15 14:14:59

在页面底部保留页脚

回答

相关问题