css - 如何让设置高度的父包装器中的面板滚动而不同时更改父级的高度

Question

我正在尝试设置 child 的高度，以便任何额外的进来都会设置溢出滚动，但不会影响 parent 的高度；

http://jsfiddle.net/x3azn/oppbktLb/2/

-- 更新后的 url --

http://jsfiddle.net/x3azn/oppbktLb/5/

<div class="wrapper">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="content">This is content, it should be flexible, dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj dsfasdflkasjdfl;kajs;fdlkasj</div>
</div>

CSS部分:

.wrapper{
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
    /* It needs to be this
    overflow: hidden; scroll the yellow part (content instead)
     */}
.header{
    background: green;
}
.menu{
    background: red;
}
.content{
    background: yellow;
}

所以在这个例子中，我试图让黄色部分可以滚动，同时不会影响整个盒子的高度。没有javascript计算，位置固定。

Answer 1

我试过了，它似乎可以满足我的需求。

.wrapper{
border: 1px solid black;
width: 200px;
height: 100px;
overflow:hidden;
/* It needs to be this
overflow: hidden; scroll the yellow part (content instead)
 */}
.header{
    background: green;
}
.menu{
    background: red;
}
.content{
    background: yellow;
    height:100%;
    overflow: scroll;
}

http://jsfiddle.net/oppbktLb/6/