这里的布局是我的网站模板 http://jsfiddle.net/QvFV8/12/,如您所见,内容超出了页脚。
当内容很少时它能正常工作,这正是我所要的。 我尝试在第一个页脚部分使用clear both,但没有效果。
如何拉伸页面以使页脚保持在底部,不管内容量大小 (有些页面将比其他页面有更多或更少的内容)?
以下是css样式:
当内容很少时它能正常工作,这正是我所要的。 我尝试在第一个页脚部分使用clear both,但没有效果。
如何拉伸页面以使页脚保持在底部,不管内容量大小 (有些页面将比其他页面有更多或更少的内容)?
<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;}