如何固定我的頁腳，但保持我的內容高度100％

我正在與sticky footer一起工作，但它沒有正常工作，並且正在給出類似於擴展視口200或400像素的擴展名。如何固定我的頁腳，但保持我的內容高度100％

我認爲這將是更容易顯示我需要什麼，而不是解釋它，見下圖：

enter image description here

編輯：我更新了我的代碼，以反映它看起來像用粘頁腳。

ORIGINAL 這裏是我的代碼：

<div id="wrapper"> 
    <header> 
    Header 
    </header> 

    <div id="container"> 
    <div id="content"> 
     Content 
    </div> 

    <div id="sidebar"> 
     Sidebar 
    </div> 
    </div> 

    <footer> 
    Footer 
    </footer> 
</div>

也注意到，我有一個側邊欄的代碼，但不提供的圖片。我將需要一個側邊欄以及沒有背景。

來源

2012-11-04 jmalais

你可以發佈你的CSS？ – Aziz

如果你不顯示你的CSS，你如何期待幫助解決CSS問題？ – Sparky

百分比高度取決於父母的位置，父母的位置是：絕對位置，否則它會回落到「height：auto」，這正是您所看到的。當你向父母申請'絕對'時，你完全破壞你的佈局。沒有JavaScript，我認爲這是不可能的，但我可能是錯的。請參閱http://www.w3.org/TR/CSS21/visudet.html#the-height-property。 – Sparky

您沒有按照教程或我看到一個空div與push類的wrapper。另外，footer不應位於您的wrapper之內。

按照該online tutorial ...

<body> 
     <div class="wrapper"> 
      <header> 
       Header 
      </header> 
      <div id="container"> 
       <div id="content"> 
        Content 
       </div> 
       <div id="sidebar"> 
        Sidebar 
       </div> 
      </div> 
      <div class="push"></div> 
     </div> 

     <footer> 
      <p>Copyright (c) 2008</p> 
     </footer> 
</body>

的CSS：

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
footer, .push { 
    height: 142px; /* .push must be the same height as footer */ 
}

jsFiddle Demo Page

請嘗試上面併發布您的實際CSS。

來源

2012-11-04 20:17:10 Sparky

嘗試使用此方法將頁腳錨定在底部。

.footer { 
width:100%; 
position:fixed; 
bottom:0; 
height:30px; 
}

來源

2012-11-04 19:57:59 Christos

請參閱OP發佈的[示例]（http://ryanfait.com/sticky-footer/）。這不是你的答案提供的。 – Sparky

如何固定我的頁腳，但保持我的內容高度100％

回答

相關問題