拉伸div以适应差距

Question

我有这样的布局：

+---------------------------------+
| #container                      |
|+-------------------------------+|
|| #top                          ||
|| This changes height           ||
||                  dynamically  ||
|+-------------------------------+|
|+-------------------------------+|
|| #mid                          ||
||                               ||
|| This changes height           ||
||                 dynamically   ||
|+-------------------------------+|
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|+-------------------------------+|
|| #bot                          ||
||       This has fixed height   ||
||                               ||
|+-------------------------------+|
+---------------------------------+

当顶部或 mid 放大时，它们会从容器溢出。我怎样才能让它们不会超过 bot ？当他们想要溢出时，应该为内部div（也就是溢出自动）

显示一个滚动条

CSS

#container{
    position: absolute;
} //Container's container has position:relative.
#bot{
    position: absolute;
    bottom: 0px;
}

Answer 1

创建#parent div并将其max-height设置为screen height - #bot height，将overflow设为scroll。

HTML：

+---------------------------------+
| #container                      |
|+-------------------------------+|
|| #parent                       ||
||+-----------------------------+||
||| #top                        |||
||| This changes height         |||
|||                  dynamically|||
||+-----------------------------+||
||+-----------------------------+||
||| #mid                        |||
|||                             |||
||| This changes height         |||
|||                 dynamically |||
||+-----------------------------+||
|+-------------------------------+|
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|+-------------------------------+|
|| #bot                          ||
||       This has fixed height   ||
||                               ||
|+-------------------------------+|
+---------------------------------+

Answer 2

尝试将height和width设置为他们的设定金额。此外，overflow:应设置为scroll。