html - 拉伸(stretch) content-div 的高度，使 vertical-navi 也被拉伸(stretch)

Question

我有这个 fiddle :http://jsfiddle.net/z715whdj/1/不知道你需要什么 css 所以请看一下 fiddle 。

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

左边的蓝色条应该是导航，它应该和内容+页脚一样高(重叠在页脚上)。我怎样才能得到它？

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

是否有可能根据 content+footer 来拉伸(stretch) navi 的高度，或者我是否必须编写一个解决方法，如果必须，如何编写这个解决方法？

Answer 1

尝试将 position:relative 设置为容器，将 position:absolute 设置为 navi。将 top 属性设置为补偿 header 高度，并将 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

编辑:

根据要求，我创建了一个新的(更简单的)布局，让容器充满 100% 高度而没有垂直滚动条:jsFiddle