Question

到目前为止，这是我的JSFiddle。

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

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());

小提琴：

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

Answer 2

试试这个

.sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

侧边栏不垂直拉伸

2 个答案: