内容div的拉伸高度如此vertical-navi得到延伸

我有这个小提琴：http://jsfiddle.net/z715whdj/1/不知道你需要从CSS所以请看看小提琴。内容div的拉伸高度如此vertical-navi得到延伸

<div class="container"> 
<div class="head"> 
    <!-- Slogen and meta-links --> 
</div> 
<div class="carousel"> 
    <!-- Maybe some headpics or a slider --> 
</div> 
<div class="logo"> 
    <!-- Main Logo --> 
</div> 
<div class="navi"> 
    <div class="logos"> 
     <ul> 
      <li></li> 
      <li></li> 
      <!-- Placeholder for some logos --> 
     </ul> 
     <div class="clr"></div> 
    </div> 
    <div class="nav"> 
     <!-- Navi UL --> 
    </div> 
</div> 
<div class="content"> 
    <!-- Content comes here --> 
</div> 
<div class="footer"> 
    <!-- Footer --> 
</div> 
</div>

左侧的蓝色栏应该是导航栏，它应该与内容+页脚一样高（页脚重叠）。我怎么能得到这个？

我得到最小高度方面，但它似乎挣扎，因为我得到一个滚动条。我在这里通读了一些问题，但我无法得到它们的某些方面。

是否有可能在内容+页脚函数中扩展navi的高度，还是必须编写解决方法，如果必须，如何编写此解决方法？

来源

2014-09-03 Dustin

什么浏览器你需要支持？ IE 6/7/8/9？ – 2014-09-03 08:18:54

IE8-11应该可以工作。 IE7会很棒。 – Dustin 2014-09-03 08:22:53

使用适当的“float”属性和“clearfix”类。 – wikijames 2014-09-03 08:24:19

尝试将position:relative设置为容器，将position:absolute设置为navi。设置top属性以补偿标题高度，并且bottom设为0以使navi满填container高度。

CSS：

.container { 
    width: 970px; 
    padding-right: 3px; 
    padding-left: 3px; 
    background-color: #fff; 
    margin: auto; 
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65); 
    z-index: 1; 
    font-family: Verdana, sans-serif; 
    font-size: 14px; 
    color: #575756; 
    min-height: 100%; 
    height: 100%; 
    position:relative; 
} 

.container .navi { 
    float: left; 
    margin-left: 30px; 
    z-index: 3; 
    background-color: #233872; 
    padding: 20px 10px 20px 10px; 
    border: 3px solid #fff; 
    border-bottom: 0; 
    position: relative; 
    width: 220px; 
    position:absolute; 
    top:50px; 
    bottom:0px; 
}

jsFiddle

编辑：

按照要求，我创建了一个新的（简单）的布局，让容器fullfill 100％的高度没有垂直滚动条：jsFiddle

来源

2014-09-03 08:50:37 Giorgio

非常感谢。我如何摆脱滚动条？高度似乎超过100％ – Dustin 2014-09-03 09:08:48

滚动条出现是因为您已设置html，body和容器的高度为100％。如果你想摆脱它，只需删除这些属性：http://jsfiddle.net/z715whdj/3/ – Giorgio 2014-09-03 09:20:43

我知道。但是如果我删除.container-height属性，那么navi即使在内容中也不会扩展。我希望它扩展，但只限于浏览器的限制，而不是上面的（所以没有滚动条 - 如果内容长度超过监视器高度，只能添加滚动条）。 – Dustin 2014-09-03 09:34:16

内容div的拉伸高度如此vertical-navi得到延伸

回答

相关问题