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的背景颜色，以确保它看起来好像导航器运行了页面的长度。

所以它变成了：

#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！

感谢您的协助:)感谢我的朋友Chris给出了这个答案。

Answer 2

根据保存内容的div的高度，你总是可以用javascipt动态地改变最小高度，我认为这是#contentWrapper。

你可以检查一下CSS粘性页脚：http://www.cssstickyfooter.com/但是由于标记的性质，需要花点时间才能让它工作。

CSS定位：页脚后面出现左侧长菜单

2 个答案: