頁腳內容

我無法將頁面劃分爲header,content和footer。我在這裏關注了一個關於stackoverflow的主題。但是，當我嘗試向內容部分添加任何內容時，我的所有內容都顯示在footer元素的下方。到目前爲止，這是我的代碼。頁腳內容

任何人都可以解釋我做錯了什麼，背後的原因是什麼？

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     //Removed 
    </head> 
    <body> 
     <div class="main-wrapper"> 
      <header> 
       <?php 
       require('header.php'); 
       ?> 
      </header> 
      <section class="page-content"> 
       yeah 
      </section> 
      <footer> 
       <?php 
       include('footer.php'); 
       ?> 
      </footer> 
     </div> 
    </body> 
</html>

這裏是我的CSS

body, html { 
    width: 100%; 
    height: 100%; 
    background: #ddd; 
    padding: 0; 
    margin: 0; 
    } 

    .main-wrapper { 
    box-sizing: border-box; 
    min-height: 100%; 
    padding: 0; 
    position: relative; 
    } 

    article { 
    background-color: white; 
    } 

    footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #555; 
    height: 55px; 
    } 
    .page-content { 
    width: 100%; 
    height: 100%; 
    } 

    .nav-bar { 
    width: 100%; 
    background: white; 
    text-align: center; 
    }

的頁面內容出現下面的頁腳，甚至當我設置它的位置，以絕對的。我究竟做錯了什麼？謝謝你的幫助。

來源

2016-08-18 davidb

嘗試刪除'高度：100％;'從頁面的內容？它可能試圖填充整個頁面包裝器空間。 – DrSatan1

您應該添加

<div style="clear:both;"></div>

的部分和頁腳標籤之間

，並看看是否有幫助

來源

2016-08-18 20:36:48 DomGato

嗨，只是資金，我的標題有問題。我使用php添加它。但是，當我刪除的PHP代碼，只需鍵入任何文本，然後它的作品。我想我需要解決這個問題。它應該沒有錯，但它。不管怎麼說，還是要謝謝你。 – davidb

嘿，很高興聽到你想出了標題問題。至於PHP，你有沒有仔細檢查你正在使用的PHP代碼？也許有一個標籤沒有關閉或沿着這些線。 – DomGato

.page-content { 
    box-sizing:border-box; 
    padding:0 0 55px; /* make space for footer */ 
}

來源

2016-08-18 20:47:35 Maju

回答

相關問題