2013-02-20 83 views
0

我期待我的頁腳佔據頁面底部的所有水平空間,width 100%由於某種原因,它在頁面中居中,似乎有我的包裝特性。 這裏是圖像(網站不活還沒有,所以我不能提供一個鏈接)爲什麼不是頁腳100%寬度?

enter image description here

那黑衣頁腳應該佔據底部所有水平的空間,我會包括代碼我認爲這是負責任的對於這個問題(代碼簡化,所以會與圖像不同)。

的jsfiddle http://jsfiddle.net/aHpua/4/

HTML

<div class="content"> 
      <article class="content-info">Content 
      </article> 
      <aside class="sidebar"> 
       <h4>MORE INFORMATION</h4> 
       <ul> 
        <li> 
         <a href="#">Item1</a> 
        </li> 

        <li> 
         <a href="#">Item2</a> 
        </li> 
       </ul> 
      </aside> 
    </div><!-- END.content-wrapper --> 
    <div class="contact-us"> 
     <h2> 
      Have any questions for us? 
      <a href="#">CONTACT US</a> 
     </h2> 
    </div><!-- END.contact-us --> 
<div class="footer-container"> 
     <div class="wrapper"> 
      <footer class="footer"> 
       <ul> 
        <li>Tel:<span> 0000</span></li> 
        <li>Fax:<span> 0000</span></li> 
        <li>Email: <a href="mailto:[email protected]">bla</a></li> 
        <li><h1>Company Name</h1></li> 
       </ul> 
      </footer> 
     </div> 
     <!-- END.footer-wrapper --> 
     <div class="copyright"> 
      <div class="wrapper"> 
       &copy; Copyright 2013. 
      </div><!-- END.copyright-wrapper --> 
     </div> 
    </div><!-- END.footer-container -->  
     <?php wp_footer(); ?> 
     <!-- Google Analytics --> 
    </body> 
</html> 

CSS

/* ========================================================================== 
    =content 
    ========================================================================== */ 

.content { 
    background-color: #fff; 
    border: 1px solid #e1e1e1; 
    padding: 30px 65px 30px 65px; 
    z-index: 999; 
    overflow: hidden; 
    box-shadow: 0 -1px 0 #ffffff inset, 
       0 -2px 0 #ebebeb inset, 
       0 -3px 0 #ffffff inset, 
       0 -4px 0 #efefef inset; 
} 

.contact-us { 
    background-color: #f9faf6; 
    padding: 30px 65px 30px 65px; 
    border-left: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
    border-bottom: 1px solid #e1e1e1; 
    box-shadow: 0 4px 5px -5px #d3d3d3 inset; 
    clear: both; 
} 

.content-info { 
    float: left; 
    width: 590px; 
    background: red; 
    line-height: 25px; 
} 

.sidebar { 
    float: right; 
    width: 220px; 
    line-height: 25px; 
} 

/* ========================================================================== 
    =footer 
    ========================================================================== */ 


.footer-container { 
    background-color: #2a2a2b; 
    background-image: url(img/header_bg.png); 
    overflow: hidden; 
    margin-top: 25px; 
    width: 100%; 
} 

.footer { 
    border-top: 5px solid #00b2e5; 
    overflow: hidden; 
} 

.copyright { 
    background-color: #242424; 
    color: #6b6b6b; 
    width: 100%; 
} 

.copyright .wrapper { 
    padding: 7px 65px 7px 65px; 
    width: 850px; 
} 
+3

裏面,你可以做一個小提琴? – dezman 2013-02-20 15:24:40

+0

給我一秒鐘。 – Ilja 2013-02-20 15:26:22

+0

我無法用您發佈的代碼重現問題。你爲什麼不至少*嘗試*縮小範圍。我們不需要像'box-shadow'或'有任何問題給我們嗎?'來調試這個問題。這就是所謂的「調試」,簡化您的問題,直到您找出原因。 – 2013-02-20 15:26:30

回答

2
.wrapper { 
width: 980px; 
margin: 0 auto; 
} 

的對象是.wrapper

2

看來。內容,.footer容器等必須有一個共同的父某處有一個固定的寬度。寬度:100%只會使頁腳與父頁一樣寬,而不是更寬,所以您必須將其移出頁面。

4

從我看到它是一個wordpress theme.make確保您的頁腳不在裏面#頁面固定寬度和邊距0自動。

div在header.php中開始,以footer.php結束。

確保您的代碼有效,並且您沒有未關閉的div。如果您在頭有#page,頁腳之前關閉它