CSS - 如何使页脚停留在页面的底部？

这里的布局是我的网站http://jsfiddle.net/QvFV8/12/的模板，因为您可以看到内容溢出了页脚。CSS - 如何使页脚停留在页面的底部？

它适用于只有少量内容的情况，这正是我想要的。我已经尝试清除第一页脚部分，但这没有效果

页面如何拉伸以便页脚保持在底部，而不管内容的多少（有些页面会有更多或内容较少然后别人）

<body> 
<div class="container"> 
    <div class="header"> 
     <div class="headerleft"> 
      <div class="headerleftcon">leftcon</div> 
      </div> 
     <div class="headerright"> 
      <div class="headerrightcon">rightcon</div> 
      </div> 
     <div class="header-content">Header 
     </div> 
    </div> 
    <div class="body"> 
     <div class="left-sidebar"> 
      <div class="left-content">left sidebar</div> 
     </div> 
     <div class="right-sidebar"> 
      <div class="right-content">right sidebar</div> 
     </div> 
     <div class="content">Content 1 
     <div class="centerbox"> 
      <div class="centerboxcontent">Center box <br> </div> 
     </div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2 
     bla bla bla 
     </div> 
    </div> 
    <div class="footer"> 
     <div class="footerleft"> 
      <div class="footerleftcon">botleftcon</div> 
      </div> 
     <div class="footerright"> 
      <div class="footerrightcon">botrightcon</div> 
      </div> 
     <div class="footer-content">Footer</div> 
    </div> 
</div> 
</body>

的CSS是如下

html, body { 
height: 100%; 
width: 100%; 
padding: 0px; 
margin: 0px;} 
.header, .footer{ 
height: 80px; 
background-color: #EFEFEF; 
position: relative;} 
.header-content{ 
padding: 20px; 
text-align: center;} 
.headerleft{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: left;} 
.headerleftcon{ 
padding: 0px 0px 0px 0px;} 
.headerright{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: right;} 
.headerrightcon{ 
padding: 0px 0px 0px 0px;} 
.footer-content{ 
padding: 20px; 
text-align: center;} 
.container{ 
height: 100%;} 
.body{ 
height: 100%; 
margin-top: -80px; 
margin-bottom: -80px; 
background-color: #C7DFFA;} 
.content{ 
padding: 80px 0px 0px 0px;} 
.left-sidebar{ 
height: 100%; 
background-color: gray; 
width: 50px; 
margin-top: -80px; 
margin-bottom: -80px; 
float: left; 
clear: both;} 
.right-sidebar{ 
height: 100%; 
background-color: gray; 
width: 50px; 
margin-top: -80px; 
margin-bottom: -80px; 
float: right;} 
.centerbox{ 
height:100px; 
background-color: blue;} 
.centerboxcontent{ 
padding: 0px 0px 0px 0px;} 
.right-content{ 
padding: 80px 0px 0px 0px; 
text-align: right;} 
.left-content{ 
padding: 80px 0px 0px 0px;} 
.footer{ 
    clear:both;} 
.footerleft{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: left;} 
.footerleftcon{ 
padding: 0px 0px 0px 0px;} 
.footerright{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: right;} 
.footerrightcon{ 
padding: 0px 0px 0px 0px;}

来源

2013-04-16 Christopher

* { 
    margin: 0px; 
    padding: 0px; 
} 
html, body { 
    height: 100%; 
} 
.header, .footer { 
    height: 80px; 
    background-color: #EFEFEF; 
} 
.header-content { 
    padding: 20px; 
    text-align: center; 
} 
.headerleft { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: left; 
} 
.headerleftcon { 
    padding: 0px 0px 0px 0px; 
} 
.headerright { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: right; 
} 
.headerrightcon { 
    padding: 0px 0px 0px 0px; 
} 
.footer-content { 
    padding: 20px; 
    text-align: center; 
} 
.container { 
    width: 100%; 
    min-height: 100%; 
    position: relative; 
    overflow: hidden; 
} 
.body { 
    background-color: #C7DFFA; 
    overflow: hidden; 
    margin-bottom: -30000px; 
    padding-bottom: 30000px; 
} 
.content { 
    margin-right: 50px; 
    margin-left: 50px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    margin-bottom: 80px; 
} 
.left-sidebar { 
    background-color: gray; 
    width: 50px; 
    float: left; 
} 
.right-sidebar { 
    background-color: gray; 
    width: 50px; 
    float: right; 
} 
.left-sidebar, .right-sidebar { 
    margin-bottom: -30000px; 
    padding-bottom: 30000px; 
} 
.centerbox { 
    background-color: blue; 
} 
.centerboxcontent { 
    padding: 0px 0px 0px 0px; 
} 
.right-content { 
    text-align: right; 
} 
.left-content { 
} 
.footer { 
    clear:both; 
    position: absolute; 
    width: 100%; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
.footerleft { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: left; 
} 
.footerleftcon { 
    padding: 0px 0px 0px 0px; 
} 
.footerright { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: right; 
} 
.footerrightcon { 
    padding: 0px 0px 0px 0px; 
}

来源

2013-04-16 23:12:47 yatanson

谢谢你的帮助，非常感谢。 – Christopher

我明白，让一个网站的页脚是比什么都有点困难，但我不知道还有多少问题我必须看到关于是，它仅仅是一个学习CSS的呼吁，现在这里有两个小提琴，我之前已经提出了相同的问题

所以，你要做的是确保你的页脚绝对在你的容器的底部，所以要做到这一点，你需要使你的容器位置：亲属;和内容的100％高度此外，容器必须有填充底部，即页脚的高度。这是真的

http://jsfiddle.net/eTwJh/2/这里是一个没有内容 - http://jsfiddle.net/eTwJh/3/

重复的问题就在这里

How do I make sure that my footer shows all the way at end of the page rather than in the middle?

下面是一些示例代码

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Amazing Footer</title> 
    <style> 
    html, body { 
     margin:0; 
     padding:0; 
     height:100%; 
    } 
    .wrapper { 
     min-height:100%; 
     position:relative; 
    } 
    footer{ 
     background:#F1F1F1; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     height:300px; 
    } 

    footer p{ 
     text-align: center; 
     padding-top:100px; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="Content"> 
      <p>HTML Ipsum Presents</p> 
     </div> 
     <footer> 
      <p>&copy; My Website 2013. All Rights Reserved!</p> 
     </footer> 

    </div> 
</body> 
</html>

来源

2013-04-16 21:48:56 iConnor

谢谢你的帮助。 – Christopher

不，问题好运 – iConnor

@ JustDon't，你在IE7，IE8中测试过吗？ – RGS

CSS - 如何使页脚停留在页面的底部？

回答

相关问题