如何刪除頁腳下的空間？

-1

我嘗試了很多技巧來刪除我的頁腳下的空白，但沒有一個解決了我的問題。我注意到，只有文本，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:i[email protected]"> [email protected]</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:[email protected]"> 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; 
    }

來源

2014-01-13 user3187964

請正確地格式化代碼併發布http://jsfiddle.net演示或刪除不必要的CSS和HTML。這不是代碼審查服務。 – kleinfreund

對不起，我在這裏是新的，我提前感謝所有嘗試幫助的人。 – user3187964

試試這個

#footerframe { 
    background-color: #AEA03A; 
    bottom: 0; 
    float: right; 
    height: 223px; 
    position: absolute; 
    width: 100%; 
}

來源

2014-01-13 08:08:21 user2211216

非常感謝，但是當我嘗試頁腳的絕對定位時，它並不適用於主內容被拉伸到更大尺寸的其他頁面。 – user3187964

更換頁腳900px 100％應該做的伎倆。

來源

2014-01-13 08:19:40 Samp

謝謝你的幫助，我嘗試過沒有成功。 – user3187964

我認爲你需要通過爲以下設置HTML，車身高度爲100％，設置編號容器實現一個棘手的頁腳工藝：

html, body { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
    } 

    #container { 
    height: auto !important; 
    min-height: 100%; 
    height: 100%;  
}

example

來源

2014-01-13 08:37:28

謝謝我感謝您的幫助，但將填充設置爲0弄亂了整個設計！任何其他建議將不勝感激。 – user3187964

如何刪除頁腳下的空間？

回答

相關問題