Question

大家好我无法让我的页脚粘到页面底部。我遵循了所有常用的建议，但我的左栏似乎扩展到它的容器div之外，因此将页脚推离页面底部。我有一个相当复杂的布局，因为我通过jQuery有相当数量的可折叠面板，但我会给你基本的结构。

基本HTML：

<html>
  <head></head>
    <body>   
      <div id="container">
        <div id="content_header"> <!-- collapsible top panel -->
          </div>

         <div id="show_content_header"> <!-- tab shown to expand top panel when minimized-->
         </div>

         <div id="content_left_panel"> <!-- collapsible left panel -->
         </div>

         <div id="show_left_panel"> <!-- tab shown to expand left panel when minimized -->
         </div>

         <div id="main_content">
         </div>
       </div>

       <div id="footer">
       </div>
    </body> 
</html>

CSS：

    body
    { height: 100%; 
      margin:0;
      padding:0;}

    html, body, #container { height: 100%; }
    body 

    #container { height: auto; min-height: 100%; }

    #content_header 
    { position:fixed;  
      width:100%; 
      left:0; 
      height:200px; 
      background:url(../images/image.png) repeat-x; 
      border:1px solid #000; 
      z-index: 100; }

    #show_content_header
    { position:fixed; 
      z-index:2; 
      display:none; 
      width:100%; 
      height:40px; 
      top:40px; 
      left:0; }

    #content_left_panel
    { position: absolute;
      top: 235px;
      left: 0px;
      width: 200px; /*Width of frame div*/
      height: auto; /*usually 100%*/
      overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
      z-index:0;}  

    #show_content_left_panel 
    { position:fixed;
      left:0; 
      float:left; 
      padding-top:5px; 
      display:none; 
      width:0px; 
      height:30px; 
      cursor:pointer; 
      top:90px;}

    #main_content
    { position: relative;
      margin-left:210px; 
      margin-top: 235px; 
      margin-right:10px;  
      margin-bottom: 100px;
      height: 100%; 
      overflow: hidden;
      z-index:0;}

#footer {
    position: relative;
    z-index: 100;
    height: 100px;
    margin-top: -100px;
    width:100%;
    background:url(../images/image.png) repeat-x; 
    clear: both;}

正如我所说，我的页脚在90％的时间内仍然位于页面底部，但是当#content_left_panel超过主要内容的高度时，页脚不再保留在页面的底部，而是它植根于容器div的底部。我很困惑，因为#content_left_panel正在突破容器我猜它是浮雕的一部分！

非常感谢任何帮助！

干杯

Answer 1

我真的不明白你想要什么样的布局，但#content_left_panel有position:absolute;规则，所以

完全从正常流程中删除

（http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning）

具有2列主要内容布局的粘性页脚

1 个答案: