3

这里的布局是我的网站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;}
4

2 回答 2

1

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

所以，你要做的是确保你的页脚绝对在你容器的底部，所以你需要让你的容器位置：相对；和 100% 的内容高度容器还必须有一个填充底部，即 footer 的高度。真的是这样

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

重复的问题在这里

如何确保我的页脚一直显示在页面末尾而不是中间？

这是一些示例代码

  <!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-16T21:48:56.047 回答
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;
}
于 2013-04-16T23:12:47.880 回答