Question

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

当只有少量内容时，它可以正常工作，这就是我想要的。我已尝试在第1页脚部分清除，但这没有效果

如何覆盖页面以使页脚保持在底部，无论内容量多少（某些页面的内容会比其他页面更多或更少）

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

Answer 1

我知道获取网站的页脚比其他任何东西都要难，但我不知道还有多少问题我需要看到这个，它只是一个学习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>

Answer 2

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

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

2 个答案: