时间戳

首页 > 解决方案 > 防止DIV溢出margin-bottom

html - 防止DIV溢出margin-bottom

问题描述

我有一个有边距的 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 或 %，一旦我调整浏览器大小，它就会溢出底部边距。如果我将它固定到底部，它会溢出 .top div。顶部 div 具有透明元素，我无法将 .bottom div 隐藏在顶部 div 下。

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

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

标签： htmlcss

解决方案

这可能会做你想要的。它无视边际，但我认为这不是问题。

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

推荐阅读