CSS - 如何让页脚留在页面底部？答案

【问题标题】：CSS - How to make footer stay at the bottom of the page?CSS - 如何让页脚留在页面底部？
【发布时间】：2013-04-17 07:15:08
【问题描述】：

这里的布局是我的网站http://jsfiddle.net/QvFV8/12/ 的模板，您可以看到内容溢出页脚。

它适用于只有少量内容的情况，这正是我想要的。我在第一个页脚部分都尝试过 clear ，但这没有效果

如何拉伸页面以使页脚保持在底部，而不考虑内容的数量（某些页面的内容会比其他页面更多或更少）

<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;}

【问题讨论】：

标签： html css

【解决方案1】：

* {
    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;
}

【讨论】：

感谢您的帮助，非常感谢。

【解决方案2】：

我知道获得一个网站的页脚比其他任何事情都难，但我不知道我还有多少关于这个的问题，它只是一个学习 CSS 的呼吁，现在这里有两个小提琴我以前做过同样的问题

所以，你需要做的是确保你的页脚绝对在你的容器底部，所以你需要让你的容器 position:relative;和 100% 的内容高度容器还必须有一个填充底部，即 footer 的高度。原来如此

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>

【讨论】：

@JustDon't，你在 IE7、IE8 中测试过吗？
@RGS 这是差不多一年前的事了，我不记得了