Question

我必须显示2个相邻的框，两个框都具有动态内容（使用角度渲染）。 Container的高度必须为Box1。 Box2的高度可能会因动态而有所不同，并且不应高于Box1。如果更高，则应显示滚动条。

我从以下代码开始使用表：

<table id="Container">
    <tr>
        <td valign="top" id="Box1">
            <dynamic rendered html code/>
        <td>
        <td>&nbsp;<td>
        <td valign="top" style="position: relative; id="Box2">
            <div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
                <dynamic rendered html code/>
            </div>
        <td>
    </tr>
</table>

不幸的是，它在IE中不起作用，因为（如我在网络上阅读的） position 未为表格定义（不是HTML标准）；

所以我决定切换到div：

<div id="Container">
    <div style="display: inline-block; vertical-align:top" id="Box1">
        <dynamic rendered html code/>
    <div>
    <div style="display: inline-block;">&nbsp;<div>
    <div style="display: inline-block; vertical-align:top" id="Box2">
        <dynamic rendered html code/>
    <div>
</div>

Box1应该始终包装其内容。如果滚动溢出，则Box2不应比Box1高。
CSS可能吗？没有JQuery，也没有Javascript。

Answer 1

我相信您希望#Box2的高度等于#Box1的高度。

无法在同一父级中对齐该高度。因此，建议您像下面这样用#Box2包装#Box1。

<div id="Box1">
    <div id="Box2">
    </div>
</div>

您可以将max-height: 100%;设置为#Box2，以使#Box2的最大高度不大于#Box1。

在文本溢出时，将overflow-x: auto;添加到#Box2可以自动显示滚动条。

https://codepen.io/blackcityhenry/pen/LMVoZd

两个相邻的具有动态内容的DIV。一个包装内容，其他滚动溢出

1 个答案: