Question

我需要构建一个两个div的结构，一个在另一个之下，每个都需要50％的高度，并且它们之间需要有20px的边距。

没有js可以做到吗？

Answer 1

以下内容应该有效：

HTML

<div class="one"></div>
<div class="two"></div>

CSS

.one, .two {
  position: absolute;
  width: 100%;
  height: 50vh;
}
.one {
  background-color: red;
  margin-bottom: 10px;
}
.two {
  background-color: blue;
  top: 50vh;
  margin-top: 10px;
}

Answer 2

您可以尝试使用视口单元（vh），如下所示。

将每个div的高度设置为50vh，这将占屏幕高度的50％。

但是，要获得20px的保证金，您需要将每个div的高度减少10px，以便为保证金腾出空间。

由于您是混合单元，因此需要使用CSS calc函数浏览器可能无法满足您的需求。

如果是这种情况，请尝试以vh为单位设置边距高度，然后您可以省略calc。

请注意包含div的封闭块。在我的示例中，我将body的边距设置为零以防止垂直滚动（我假设您不想要）。

＆＃13;

body {
  margin: 0;
}
.top {
  background-color: lightgray;
  height: calc(50vh - 10px);
  margin-bottom: 20px;
}
.bottom {
  background-color: lightgray;
  height: calc(50vh - 10px);
}

＆＃13;

<div class="top">Top...</div>
<div class="bottom">Bottom...</div>

＆＃13;

两个div一个低于另一个，每个高50％

2 个答案: