CSS，自动调整大小的div？

Question

我正在尝试使用CSS设计布局，我有一个主容器(div)和两个内部容器(div_upper和div_lower)。假设我想调整div_upper的大小，div_lower会自动调整大小，并且两个div仍然适合主容器。我确信这可以用JavaScript来实现，但是否有CSS可以完成这个任务？如果有的话，我会很高兴。

- khousuylong

Answer 1

另一个解决方案： 使用此类来获取自动垂直高度 -

.getAutoHeight {
   position: relative;
   overflow: auto; /* edit by thobens: overflow: hidden seems to be better, as (at least) IE 8 shows always a disabled scrollbar with overflow: auto */
}

<div class="getAutoHeight ">
    any content<br />
    any content<br />
    any content<br />
    any content<br />
</div>

- Otabek

Answer 2

也许这篇博客文章在A List Apart网站上会帮助您朝正确的方向前进。

- RuudKok

Answer 3

CSS3 resize:

.thisDiv {resize:both;}

- paborito

Answer 4

你可以像下面这样使用flex选项：

<div class="container">
    <div class="upper"></div>
    <div class="lower"></div>
</div>

<style>
    .container
    {
        display:flex;
        flex-direction:column;
        height:300px;
    }
    .container .upper
    {
        height:10px;
    }
    .container .lower
    {
        flex-grow:1;
    }
</style>

现在较低的高度是“290像素”。

- thisisnabi