Question

我有2个div，它们以50％的高度连续堆叠在一页上，并分为两种颜色。

但是，在较小的屏幕上，用户需要滚动，这会破坏设计。我希望两个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>

Answer 2

要解释先前用户的回答，使用vh是在现代浏览器中获得几乎完美支持的设备高度的一种方法。您可以将两个div分成50vh，它会相应地调整大小。 CCS-Tricks包含有关此主题的更多信息！

.first-50 {
  height: 50vh;
  width: 100%;
  background: red;
  position: relative;
  color: #fff;
}

.second-50 {
  height: 50vh;
  width: 100%;
  background: blue;
  position: relative;
}

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

Answer 3

当视口调整大小时，您可以使用vh来调整高度

引用w3schools.com

vw相对于视口宽度的1％
vh相对于视口高度的1％

div {
    height: 50vh;
    width: 100%; /* or width : 100vw */
}

并添加您想要的内容

50％的高度div按行堆叠

3 个答案: