頁腳不會隨着內容高度的增加而向下移動

我試圖在頁面內容頁面高度增加時將頁腳向下推。但我無法做到這一點。頁腳始終貼着側欄。因爲這是我的內容頁面溢出頁腳。頁腳不會隨着內容高度的增加而向下移動

我的CSS代碼如下：

#header 
{ 
    height: 150px; 
    background-color: #375BB0; 
} 

#nav 
{ 
    **strong text**height: 100%; 
    width: 231px; 
    float: left; 
} 

    #nav2 
{ 
    height: 100%; 
    width: 250px; 
    float: right; 
} 
#content 
{ 
    height: 100%; 
    bottom: 0; 

    } 

#footer 
{ 
    clear: both; 
    height: 50px; 
    background-color: #CCCCCC; 
    color: #333333; 
    text-align: center; 
    }

我的標記代碼：

<body> 
    <form id="form1" runat="server"> 
    <div> 

      <div id="header"> 
      </div> 
      <div id="nav"> 
       <table class="style1" style="width: 100%; position: static ;" > 
       </table> 
     </div> 
     <div id="nav2"> 
      <table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" > 
      </table> 
     </div> 
     <div id="content"> 
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 
       </asp:ContentPlaceHolder> 

     </div> 
     <div id="footer" style="clear: both; height:500px;" > 
      Copy rihgt @ xyzoman.com 
     </div> 
</div> 
</form>

請幫我

來源

2013-12-08 FaisalThayyil

試試這個，我改變了兩件事情。首先，您將元素的高度設置爲100％，並將其設置爲100％的元素，因此，除非內容大於頁面，否則它們將不會排隊，而我則將內容display: inline block;設置爲使菜單將在任何一方，而不只是在一邊，然後環繞內容，但你可以改變這一點，如果你想..但你主要的主要問題是在導航CSS標籤的高度100％！

其他一切都保持不變。

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style> 
#header 
{ 
    height: 150px; 
    background-color: #375BB0; 
} 

#nav 
{ 
    width: 231px; 
    float: left; 
} 

    #nav2 
{ 
    width: 250px; 
    float: right; 
} 
#content 
{ 
display:inline-block; 
height: 100%; 
bottomL 0; 
} 
#footer { 
    display:block; 
    bottom: 0; 
    height: 50px; 
    background-color: #CCCCCC; 
    color: #333333; 
    text-align: center; 
} 
</style> 
</head> 

<body> 
    <form id="form1" runat="server"> 
    <div> 

      <div id="header"> 
      </div> 
      <div id="nav"> 
       <table class="style1" style="width: 100%; position: static ;" > 
       <tr><td>Table</tr> 
       </table> 
     </div> 
     <div id="nav2"> 
      <table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" > 
       <tr><td>Table</tr> 
      </table> 
     </div> 
     <div id="content"> 
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 
       </asp:ContentPlaceHolder> 

     </div> 
     <div id="footer" style="clear: both; height:500px;" > 
      Copy rihgt @ xyzoman.com 
     </div> 
</div> 
</form> 
</body> 
</html>

來源

2013-12-08 09:20:34

我想你的code.But仍無法工作的頁腳會up.Thank你的你的迴應 – FaisalThayyil

我很抱歉，但我在3個瀏覽器嘗試這樣做，它工作得很好，我用這個詞上面寫的確切代碼換句話說，它的作品。如果它不工作，那麼上面沒有任何東西導致它。我會考慮像你可能在這篇文章中遺漏的其他div一樣，還有什麼其他div。我也會確保你在頂部有適當的文檔類型。 –

你想要你的頁腳？ –

頁腳不會隨着內容高度的增加而向下移動

回答

相關問題