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/但由于标记的性质，它需要一些小小的摆弄。