页脚不会随着内容高度的增加而向下移动

我试图在页面内容页面高度增加时将页脚向下推。但我无法做到这一点。页脚始终贴着侧栏。因为这是我的内容页面溢出页脚。页脚不会随着内容高度的增加而向下移动

我的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。我也会确保你在顶部有适当的文档类型。 –

你想要你的页脚？ –

页脚不会随着内容高度的增加而向下移动

回答

相关问题