Question

我正在尝试使侧边栏扩展以适应容器的高度。我错过了什么？

.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;
}

小提琴：link

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从左侧推出侧边栏的宽度。

Demo

Div：高度100％的封闭div

1 个答案: