如何在一個設定的高度父級包裝滾動不同時更改父母的高度

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/