我正在尝试设置 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计算,位置固定。
最佳答案
我试过了,它似乎可以满足我的需求。
.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;
}
关于css - 如何让设置高度的父包装器中的面板滚动而不同时更改父级的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26431596/