请帮忙！
我尝试了许多技巧来删除我的页脚下的空白区域，但没有一个能解决我的问题。我注意到只有在带有 text，p和h1 标签的页面中才能看到空白区域。任何帮助都非常感谢。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olive Green Studio</title>
<link href="oliva.css" rel="stylesheet" type="text/css" />
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"><!-- end #header -->
<div id="logo">
<a href="index.html">
<img src="olivaimages/olivegreenlogoweb.png" border="none"/>
</a>
</div>
<div id="sidebar1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end #sidebar1 --></div>
</div>
<div id="mainContent">
<h1>Contact Us </h1>
<p>If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.</p>
<a class="worklinks" href= "mailto:info@olivegreenstudio.com"> info@olivegreenstudio.com</a>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div class="clearfooter"></div>
<!-- end #container -->
</div>
<div id="footerframe">
<div id="footer">
<div id="footer2">
<div id="address">Khobar<br> Saudi Arabia </div>
<div id="contact">
<strong>Services:</strong><br> Logos<br>Branding<br>Identity<br>Collaterals<br>Packaging<br> Web Design & Development <br>
</div>
<div id="email">
If you have a project inquiry, we will be happy to answer you <a class="contactlink" href="mailto:info@olivegreenstudio.com"> here.</a>
</div>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/OliveGreenSTU" />
<img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" />
</div>
</a>
<div id="pinterest">
<a href="http://pinterest.com/olivegreenstu/">
<img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"
onmouseout="this.src='olivaimages/pinterestwebgreen.png'" />
</a>
</div>
<div class="copywrite"> © 2013 Olive Green. All rights reserved.</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
height: 100%;
}
.twoColFixLtHdr #header {
height: 170px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #5A6219;
text-decoration: none;
font-style: normal;
font-weight: normal;
padding-bottom: 20px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #908B23;
text-decoration: none;
line-height: 1.5em;
margin-bottom: 30px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #908B23;
text-decoration: none;
margin: 0px;
}
.twoColFixLtHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: -215px;
height: 100%;
}
.twoColFixLtHdr #mainContent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.workmaincontent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 300px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
margin-top: 70px;
background-color: #FFFFFF;
height: 30px;
}
#sidebar1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 200px;
line-height: 1.5em;
text-decoration: none;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 500px;
}
#sidebar1 ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar1 li {
display: run-in;
list-style-type: none;
}
#sidebar1 a {
display: run-in;
text-decoration: none;
color: #918C10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 5px;
float: left;
width: 65px;
}
#sidebar1 a:hover {
color: #5A6219;
}
.worklinks{
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.worklinks:hover{
font-family: Arial, Helvetica, sans-serif;
color: #908B23;
text-decoration: none;
}
#print{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-right: 85px;
}
#web{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-top: 50px;
margin-bottom: 50px;
}
#packaging{
background-color: #FFF;
height: 100%;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
}
.imagetitles a {
text-decoration: none;
font-family: "Century Gothic";
font-size: 25px;
font-style: normal;
font-weight: normal;
color: #00CCCC;
}
#printtitle{
bottom: -5px;
left: 333px;
}
#webtitle{
position: absolute;
left: 333px;
top: 521px;
}
#packagingtitle{
position: absolute;
left: 317px;
top: 823px;
width: 89px;
}
#bigimages{
width: 570px;
height: 100%;
}
.imagestalk {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
.thumbnails {
border: 5px solid #666666;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #5A6219;
text-decoration: none;
}
h3 a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
h3 a:visited {
color: #D0BA0B;
text-decoration: underline;
}
h3 a:hover {
color: #5A6219;
}
h3 a:active {
color: #579835;
}
.back{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
padding-left: 520px;
}
.back a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
}
.back a:visited {
color: #666666;
text-decoration: none;
}
.back a:hover {
color: #000000;
text-decoration: none;
}
.back a:active {
color: #333333;
text-decoration: none;
}
.source{
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
.workimage {
height: 150px;
width: 200px;
float: left;
margin: 20px;
}
img {
border: 0;
}
#logo {
height: 150px;
width: 300px;
float: left;
}
#footerframe {
width: 100%;
background-color: #AEA03A;
height: 215px;
position: relative;
float: right;
}
#footer {
width: 900px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: #AEA03A;
float: none;
position: relative;
height: 215px;
}
#footer2 {
width: 100%;
background-color: #AEA03A;
padding-top: 30px;
float: left;
position: relative;
}
#address {
height: 50px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #5A6219;
line-height: 1.5em;
}
#contact {
height: 130px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
margin-right: 180px;
margin-left: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
line-height: 18px;
}
#email {
background-color: #AEA03A;
height: 50px;
width: 180px;
float: right;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
}
.social {
background-color: #AEA03A;
height: 35px;
width: 100%;
float: right;
margin-top: 20px;
}
#pinterest {
height: 20px;
width: 20px;
float: left;
background-repeat: no-repeat;
margin-left: 15px;
margin-bottom: 15px;
}
.twitter {
height: 20px;
width: 20px;
background-repeat: no-repeat;
float: left;
margin-bottom: 15px;
}
.copywrite {
font-size: 11px;
font-weight: lighter;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
width: 300px;
background-color: #AEA03A;
float: right;
height: 15px;
color: #5A6219;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 5px;
}
.contactlink {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink a {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
h4 {
color: #5A6219;
}
.indeximg {
height: 100px;
width: 900px;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../olivaimages/indeximg.png)
}
.indexwrap {
height: 100%;
width: 810px;
padding-left: 90px;
}
#wrapper {
min-height: 100%;
}
.clearfooter {
height: 215px;
clear: both;
}
答案 0 :(得分：1)
试试这个
#footerframe {
background-color: #AEA03A;
bottom: 0;
float: right;
height: 223px;
position: absolute;
width: 100%;
}
答案 1 :(得分：1)
以100％替换页脚900px应该可以解决问题。
答案 2 :(得分：0)
我认为你需要通过将html，body height设置为100％来实现粘性页脚技术 将id＃container设置为以下内容：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: auto !important;
min-height: 100%;
height: 100%;
}