html - CSS 定位 : Left hand long menu appears behind footer

Question

我有一个固定居中的 CSS 两列布局。在导航很长而内容很短的页面上，页脚不会重新定位到导航下方 - 它保持在内容区域的最小高度并且导航位于页脚后面。

我已将所有内容都包含在 fiddle 中供您查看: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

因为我试图将两个元素都 float 到左侧，但对其中一个 div 使用绝对定位，所以事情发生了冲突。我删除了内容包装器上的 float 并删除了导航包装器上的绝对定位。然后我更改了包含的 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!