CSS定位：左側長菜單出現在頁腳後

Question

我有一個固定和居中的CSS兩列布局。在導航較長且內容較短的頁面上，頁腳不會重新定位到導航下方 - 它保留在內容區域的最小高度，並且導航位於頁腳後面。

我已經包含在小提琴的一切給你看：http://jsfiddle.net/fmJqw/1/

但本質上，我有以下結構：

<div id="wrapper"> 
    <div id="headerWrapper"></div> 
    <div id="bcrumbwrapper"></div> 
    <div id="midWrapper"> 
     <div id="navWrapper"></div> 
     <div id="contentWrapper"></div> 
    </div> 
    <div class="clear"></div> 
    <div id="footerWrapper"></div> 
</div> 

的CSS如下：

#wrapper{ 
    padding:0px; 
    margin:0 auto; 
    width:1000px; 
    min-height:768px; 
} 
/*Header styles*/ 
#headerWrapper{ 
    padding:0px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:175px; 
    position:relative; 
} 

#bcrumbWrapper{ 
    padding:0px 0px 0px 20px; 
    margin:0px; 
    width:980px; 
    min-height:24px; 
    position:relative; 
} 

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
    min-height:513px; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    float:left; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

#footerWrapper{ 
    padding:5px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:40px; 
    position:relative; 
} 

感謝任何幫助！我正在把我的頭髮撕掉。

Answer 1

我從一個不是這裏的會員的朋友那裏找到了答案，所以想發佈給任何人的未來參考。

因爲我試圖浮動兩個項目的左側，但使用一個div的絕對定位，事情是競爭。我刪除了內容包裝上的浮動，並刪除了導航包裝上的絕對位置。然後我改變了包含div的背景顏色，以確保它看起來好像navwrapper運行了頁面的長度。

所以就成了：

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
    background-colour: #EBE2CA; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

無需更改HTML和沒有所需的JavaScript！

感謝您的協助:)並感謝我的朋友克里斯爲這個答案。

Answer 2

你總是可以根據保存內容的div的高度動態地改變最小高度javascipt，我認爲這是#contentWrapper。

您可以檢查CSS Sticky footer：http://www.cssstickyfooter.com/但由於標記的性質，它需要一些小小的擺弄。