Question

.container{
    height: 300px;
    width: 200px;
}

.header{
    height: 20px;
    background-color: yellow;
}

.content-upper{
    max-height: 230px;
    background-color: yellowgreen;
    overflow-y: scroll;
    overflow-x: hidden;
}

.content-lower{
    min-height: 50px;
    max-height: 100px;
    background-color: teal;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

http://jsfiddle.net/zacy239v/1/

所以这里我们有一个容器，其他三个div按顺序在其中。 content-upper没有最小高度，所以当content-lower变大时它会缩小，但它不会。相反，即使我将content-lower设置为0，bottom也会向下展开。如果我将container的溢出设置为隐藏，它将从content-lower切除。当没有足够的空间时，有没有办法让content-upper缩小？

Answer 1

试试这个小提琴。我希望这有帮助 Fiddle

我刚刚使用

.container{
    height: 300px;
    width: 200px;
    position:absolute;
    padding-bottom: 90px
}

如何在固定的div内保持灵活高度的内容？

1 个答案: