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

大家好，我无法让页脚粘贴到页面的底部。我遵循了所有常见的建议，但是我的左列似乎超出了它的容器div，从而将页脚从页面底部推出。我有一个相当复杂的布局，因为我通过jQuery有相当数量的可折叠面板，但我会给你基本的结构。具有2列主内容布局的粘性页脚

基本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正在破坏容器，我猜测这是一个浮动的事情！

任何帮助非常感谢！

干杯

来源

2011-10-14 Ally

我认为我们需要看到问题在行动中解决t他问。你是否已经编码并公开可见？ – Alex

不幸的是，但正如我所说＃content_left_panel的高度超过它打破的#main_content高度。容器div的高度似乎是由#main_content决定的，并且不注意#content_left_panel ... – Ally

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

它是从正常流程完全删除

（HTTP ：//www.w3.org/TR/CSS2/visuren.html#absolute-positioning）

来源

2011-10-14 12:18:13 MatTheCat

是的，这是问题，我结束了使用stick footer web重新构建所有页面容器：http：// www。 cssstickyfooter.com/ – Ally

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

回答

相关问题