html - 侧边栏 div 不垂直拉伸(stretch)

Question

这是我的 JSFiddle到目前为止。

如何使侧边栏在整个页面上垂直(高度)拉伸(stretch)？现在它拉伸(stretch)到网络浏览器窗口的原始高度，但是当容器内有更多内容时，侧边栏不会随之拉伸(stretch)。

HTML:

    <div class="main-content">
        <div class="sidebar">
            menu
        </div>

        <div class="content">
            ... a bunch of content ...
        </div>
    </div>

来自上述 JSFiddle 的 CSS:

html, body {
    width: 100%;
    height: 100%;
}

.main-content {
    width: 100%;
    height: 100%;
}

.sidebar {
    width: 100px;
    float: left;
    background-color: #000;
    color: #fff;
    min-height: 100%;
}

.content {
    width: 200px;
    float: left;
}

Answer 1

我认为没有针对此问题的“纯”CSS 解决方案。问题是您的侧边栏是其父容器的 100% 高度。它的父容器 main-content 是其父容器(窗口)的 100% 高度。因此，要使您的 content 与 main-content 的内部内容高度相同，您必须将像素高度值设置为 main-content。

但是您可以使用 jquery 轻松解决此问题。

var sidebar = $('.sidebar');
var content = $('.content');

if (content.height() > sidebar.height() )
    sidebar.css('height', content.height());
else
    sidebar.css('height', sidebar.height());

fiddle :

http://jsfiddle.net/up7Zg/29/和 http://jsfiddle.net/up7Zg/30/