1

我有一个固定且居中的 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;
}

任何帮助感激不尽！我在扯头发。

4

2 回答 2

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！

感谢您的协助 :) 并感谢我的朋友 Chris 的回答。

于 2012-05-08T07:03:23.723 回答
0

您总是可以根据包含内容的 div 的高度，用一点 javascipt 动态更改最小高度，我认为这是#contentWrapper。

您可以检查 CSS Sticky 页脚：http ://www.cssstickyfooter.com/但由于您的标记的性质，它需要一些摆弄才能使其工作。

于 2012-05-03T07:47:54.260 回答