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

发布于 2024-11-19 20:35:16 字数 629 浏览 3 评论 0原文

用 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 可以根据需要进行更改；我需要的是左列、右列和右列底部滚动的最终结果（如果其上下文超出主容器中的可用空间）。

原文

Is it possible to do this with CSS? Given the following HTML:

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

I want bottom to scroll if it overflows the space between top and the bottom of main-container.

How can this be done without specifying the height of bottom?

I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.

The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梓梦 2024-11-26 20:35:16

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

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

回复收藏 0 原文

池予 2024-11-26 20:35:16

希望这就是您正在寻找的：

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

Hope this is what you are looking for:

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

回复收藏 0 原文

~没有更多了~