设置 div 高度以适应容器溢出答案

【问题标题】：Set div height to fit container with overflow设置 div 高度以适应容器溢出
【发布时间】：2015-08-17 22:12:11
【问题描述】：

我在带有溢出的模态中有一个两列 div。

左div比右div高导致溢出，右div背景色稍暗。

如果我将右 div height 设置为 100%，或者将 top 和 bottom 设置为 0，那么它只会填充到模态的高度，所以如果您向下滚动以查看左侧的竞争div，那么右边溢出的背景颜色就默认了。

如何让灰色背景填充模态框的整个高度？我无法为列 div 设置特定的高度。

编辑：JS FIDDLE

【问题讨论】：

也许你应该创建一个 jsfiddle 来详细演示它是如何完成的。但是，您为什么不尝试使用 display: table 作为持有者和 display: table-cell 作为列？
好的，现在开始做小提琴。
为什么人们投票结束这个话题？这是一个特定的编码问题。另外，我添加了一个 JS 小提琴

标签： html css

【解决方案1】：

使用CSS table-layout:

.two-column {
    display: table-cell;
    width: 50%;
}
.right-column {
    background-color: gray;
}

示例 jsFiddle：http://jsfiddle.net/5Lvp3n5h/1/

.modal {
    display: table; 
}

.two-column {
    display: table-cell;
    width: 50%;
}

.left-column {
    height: 5000px; /* This is actually dynamic in my case */
}

.right-column {
    background-color: gray;
}

<div class="modal">
    <div class="two-column left-column">Stuff</div>
    <div class="two-column right-column">I wish this div would keep a gray background color even after scrolling.</div>
</div>

【讨论】：

【解决方案2】：

您可以为此使用 CSS3 与父级的 display flex，以使子级的高度适合父级的高度。

示例：https://css-tricks.com/boxes-fill-height-dont-squish/
可靠的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex

【讨论】：

【解决方案3】：

您可以使用 javascript 计算和分配高度。

如果你只想使用 css：

你可以使用

display:table-cell;

参考以下链接：

fiddle

如果您的左侧面板始终保持较大，那么您还可以使用以下技巧：

fiddle

【讨论】：

【解决方案4】：

当页面已加载时，您可以使用Javascript 或Jquery 将right div 的高度设置为等于left div。

如果您不想使用 Javascript 或 Jquery，我对您的页面有这样的技巧：

将两个div 包裹在wrap div 中，然后将background-color 设置为更暗。
left div 设置background-color 与模态相同。
right div 未设置 background-color => 它看起来像与wrap div 相同的较暗背景。

【讨论】：

【解决方案5】：

尝试在右侧 div 上使用填充，或者您可以使用
标签来填充空间。虽然这不是完美的编码实践，但总能做到这一点

【讨论】：