html - 50% 高度的 div 堆叠成行

Question

我有 2 个高度为 50% 的 div 堆叠成一行，在一个分为 2 种颜色的页面上。

但是在较小的屏幕上用户需要滚动，这破坏了设计。我想让这两个 50% 的 div 填满整个网页。

.first-50 {
  height: auto;
  width: 100%;
  background: red;
  position: relative;
  color: #fff;
  min-height: 50%;
}

.second-50 {
  min-height: 50%;
  height: auto;
  width: 100%;
  background: blue;
  position: relative;
  display: none;
}

<div class="height-50 first-50">
  text
</div>
<div class="height-50 second-50">
  text
</div>

谢谢

Answer 1

这是一个在我测试过的有限场景中工作的简单示例。

相对定位，它只会填充它需要的空间。您可能需要绝对定位/调整大小以强制它填充您需要的区域。但是，请注意页面上的其他元素(通常是相对的或默认的静态定位)根本不会意识到它们，而只会重叠它们或其他任何东西。

因此，如果您只是在寻找背景内容，无论顶部内容如何，​​它总是填充 50%/50%，那么这种绝对定位方法就足够了。如果您需要这两个区域来跟随页面的流动并尊重它们周围的元素，那么它不会。

body {
  height: 100%;
  min-height: 100%;
}

.first50 {
    background: red;
    color: #fff;
}

.second50 {
    top: 50%;
    background: blue;
    color: #fff;
}

.height50 {
    height: 50%;
    min-height: 50%;
    width: 100%;
    position: absolute;
}

<div class="height50 first50">
    text
</div>
<div class="height50 second50">
    text
</div>