Question

我有一个有边距的div，里面有另外2个div：一个在上面，另一个在下面。我希望顶部div下方的div填充到主div边缘的空白处。

这是我的结构：

<div class="main">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS：

.main {
    width: 90px;
    height: 30vh;
    min-height: 225px;
    margin: 0;
    margin-left: 5px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.main div的高度根据viewheight调整大小。
.top div是高度为220px的表单。
.bottom div应该填充.top和margin-bottom之间的空白区域。

我已经尽力了。如果我尝试vh或％，则当我调整浏览器大小时，它会在margin-bottom下溢。如果我将其固定在底部，则会溢出.top div。顶部div具有透明元素，我无法将.bottom div隐藏在顶部div下。

我的猜测是，我需要以某种方式获取.top div到margin-bottom的距离，并将其设置为.bottom div的高度。但是我已经寻找了一个多小时的解决方案，一无所获。

没有。这个问题不是标题下的重复。我也在寻找兼容性。 Flexbox和Js不好。

Answer 1

这可能会做您想要的。它忽略了边距，但我认为这不是问题。

.bottom { height: calc(100% - 220px); }

防止DIV从底部溢出

1 个答案: