css - div：高度为封闭 div 的 100%

Question

我正在尝试使侧边栏扩展以适合容器的高度。我错过了什么？
​</p>

.container {
    border: 1px solid red;
    overflow:hidden;
}

.sidebar {
    border: 1px solid blue;
    width: 50px;
    float: left;
    min-height: 10px;
    height: 100%;
}

.column {
    border: 1px solid black;
    width: 100px;
    height: 200px;
    float: left;
}​  

小提琴：链接

Answer 1

.container {
    border: 1px solid red;
    overflow:hidden;
    position:relative;
}

.sidebar {
    border: 1px solid blue;
    width: 50px;
    min-height: 10px;
    position:absolute;
    top:0;
    bottom: 0;
}

.column {
    border: 1px solid black;
    width: 100px;
    height: 200px;
    margin-left: 50px;
}​

使容器位置相对，以便您可以将侧边栏绝对定位在其中。然后将侧边栏的顶部和底部位置设置为 0，使其拉伸整个高度。您还必须将列 div 从左侧推出侧边栏的宽度。

演示