Question

当内容页面高度增加时，我试图将页脚向下推。但我无法做到这一点。页脚总是坚持侧栏。因此我的内容页面溢出页脚。

我的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>

请帮帮我

Answer 1

试试这个，我改变了两件事。首先，你将元素的高度设置为100％到100％的页面元素，所以除非内容大于页面，否则它们永远不会排列，2，我制作了内容display: inline block;这样你的菜单就在两边，而不只是在一边，然后包裹内容，但如果你想要你可以改回来..但你的主要主要问题是nav 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>

根据内容高度的增加，页脚不会向下移动

1 个答案: