Question

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

左边的div比右边的div高，导致溢出，右边的div有一个稍深的背景颜色。

如果我将div height设置为100％，或将top和bottom设置为0，那么它只会填充模态的高度，所以如果向下滚动要查看左侧div中的争用，则右侧溢出的背景颜色将变为默认值。

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

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS3为父母显示flex，以使孩子的身高适合父母的身高。

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

Answer 3

您可以使用javascript计算并指定高度。

如果您只想使用css：

你可以使用

display:table-cell;

见以下链接供参考：

fiddle

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

fiddle

Answer 4

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

如果您不想使用Javascript或Jquery，我会为您的网页添加一个技巧：

在div内包裹两个wrap div，然后将background-color设置为更暗。
left div设置background-color与模态相同。
right div未设置background-color =＆gt;它看起来像wrap div一样的深色背景。

Answer 5

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

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

5 个答案: