Question

首先，我不寻找Javascript解决方案。

我也更喜欢解决方案 NOT 来使用CSS3。如果可能（这是为了支持）

这可以水平完成。如 xHTML/CSS: How to make inner div get 100% width minus another div width

所示

我想知道是否可以垂直实现类似的东西。

我知道CSS3解决方案可以使用calc（）制作;运营商。但是我正在寻找一个更老的学前CSS3解决方案，所以我可以获得尽可能多的支持。

假设有一个父容器，其尺寸由用户通过调整大小来设置。

There are two inner divs, one above the other.
 - one is as high as its content
 - one fills the rest of the height and scrolls if overflows.

滚动容器位于不断增长的容器上方。

在这里，解释得有点简单：

<div id="parent">
    <div id="scroll">
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content
    </div>
    <div id="grow">
        as this content grows,
        the above content above gets smaller,
        but is scrollable,
    </div>
</div>

#parent{
    height : user defined in pixels / can randomly change
    width  : user defined in pixels / can randomly change
}

#grow{
    width  : as wide as parent
    height : as_height_as_contents
}

#scroll{
    width    : as wide as parent
    height   : whatever height is remaining
    overflow : auto /* scroll if necessary */
}

这可能吗？

Answer 1

这是不可能的。

如果你忍受我的原因在于创造新线条的文字。要处理此问题，必须将滚动div设置为例如px或％。显然px会阻止它调整大小，所以它必须是％。将其设置为100％将导致它占用整个框并将其设置为50％将简单地设置为占用一半的框。它仍然不够动态。

为什么需要将div框设置为特定大小？因为如果将div设置为height，则txt只会导致div框展开：auto;即使我们将盒子设置为100px，文本仍将覆盖DIV，除非我们设置了溢出auto，这与我们在固定大小时失败并不相关。

Answer 2

没有js或calc，你能得到的最接近的东西是这样的

#parent{
    height : 300px; /* User defined in pixels / can randomly change */
    width  : 500px; /* User defined in pixels / can randomly change */
}
#scroll{
    height   : 100%;
    overflow:auto;
}

Demo

另一种选择是使用flexbox，但支持的次数少于CSS3

否则不可能

HTML / CSS：两个块divs一个滚动，一个生长受父级限制

2 个答案: