html - 将侧边栏拉伸(stretch)到页面的全高

Question

我有这个:http://jsfiddle.net/s75ew662/7/

如何将左侧边栏(灰色)拉伸(stretch)到整个页面的高度？

.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

Answer 1

根据您当前的代码，最简单的方法是使用 viewport units .

.sidebar {
    height: 100vh;
}

body {
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    height: 100vh;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

如果您需要支持旧版浏览器，您可以改为这样做。

html, body, .container{
    height: 100%;
}
.sidebar {
    min-height: 100%;
}

html, body, .container{
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    min-height: 100%;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

为了修复内容高于侧边栏时的滚动+溢出问题。需要对标记进行一些细微的更改，请参阅 JsFiddle演示。

html, body, .container {
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
    display: table;
}
.sidebar {
    display: table-cell;
    width: 200px;
}
.content {
    display: table-cell;
    width: 550px;
}
.sidebar .inner {
    height: 100%;
    background: lightgrey;
}
.content .inner {
    background: lightblue;
}
.content .inner div {
    height: 100px; /*testing*/
}

<div class="container">
    <div class="sidebar">
        <div class="inner">
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <div class="content">
        <div class="inner">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>