具有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列主內容佈局的粘性頁腳

回答

相關問題