Question

是否可以使用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的高度的情况下完成此操作？

如果可能的话，我宁愿不在其他元素上指定高度。它现在不是，但{{1}}也可能有动态内容。

上面的HTML可以随时改变;我需要的是左列，右列和右列的底部滚动的最终结果，如果它的上下文超出主容器中的可用空间。

Answer 1

希望这就是你要找的东西：

<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>

Answer 2

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

设置完维度后，overflow:auto;会在您需要时显示滚动条。

Javascript - 扩展div以适应内容但不扩展到容器之外

2 个答案: