将侧边栏拉伸到页面的整个高度

Question

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

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

.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

作为一个非常简单的解决方案，您可以使用vh测量单位，它对应于视口高度的百分比。

.sidebar {
    width: 200px;
    height: 100vh;
    background: lightgrey;
    float: left;
}

请记住，执行此操作时，您需要考虑现有的边距。我在这里发布了一个工作示例作为 jsfiddle 的分支：https ://jsfiddle.net/01ubpbfg/