如何在一个设定的高度父级包装滚动不同时更改父母的高度

Question

我想设置一个孩子的高度，以便任何额外的进来将设置溢出滚动，但不影响父母的身高;

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

- 更新网址 -

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/