Javascript - 扩展 div 以适应内容但不扩展容器外答案

【问题标题】：Javascript - expand div to fit contents but not expand outside of containerJavascript - 扩展 div 以适应内容但不扩展容器外
【发布时间】：2011-07-12 19:54:06
【问题描述】：

是否可以使用 CSS 来做到这一点？给定以下 HTML：

<div class="main-container">
    <div class="left">
        ...
    </div>
    <div class="right">
        <div class="top">
            ...
        </div>
        <div class="bottom">
            dynamic content
        </div>
    </div>
</div>

如果bottom 溢出main-container 的顶部和底部之间的空间，我希望它滚动。

不指定bottom 的高度怎么办？

如果可能的话，我也不希望在其他元素上指定高度。现在还不行，但top 也可以有动态内容。

上面的 HTML 可以根据需要进行更改；如果上下文超出主容器中的可用空间，我需要的是左列、右列和右列底部滚动的最终结果。

【问题讨论】：

你试过overflow:scroll on .bottom吗？
设置溢出属性不会生效，除非您还指定了同一元素的高度。我正在专门寻找一种模拟溢出的方法：在.bottom 上自动，而无需指定.bottom 的高度。我想要的是一个动态扩展的.bottom，可能带有一个动态生成的.top，如果它超出了.main-container的范围，它会自动滚动。据我所知，可能没有纯 CSS（非 Javascript）解决方案。

标签： html css overflow containers expand

【解决方案1】：

最后，您必须为元素指定某种限制（height 或 max-height），以了解内容是否超出限制。

设置好这些尺寸后，overflow:auto; 会在您需要时向您显示滚动条。

【讨论】：

【解决方案2】：

希望这是您正在寻找的：

<div class="main-container">
    <div class="left" style="float: left; width:33%">
        ...
    </div>
    <div class="right" style="float: right; width:66%">
        <div class="top" style="height: auto;">
            ...
        </div>
        <div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
            dynamic content
        </div>
    </div>
</div>

【讨论】：

此解决方案不起作用，因为我不想指定 .bottom 的高度。出于我的目的，指定 max-height 会产生与指定 height 相同的缺点，即我正在寻找一种 .bottom 不必“知道”任何特定高度测量的方法。此外，如果 .top 的高度 + .bottom 的高度 > .main-container 的高度，将 .bottom 的最大高度设置为 .main-container 的高度会将 .bottom 推出 .main-container 的底部。