html - 我希望我的主页在视觉上被分成两个全视图屏幕，全高度

Question

我目前正在使用如下所示的标记。它确实以全高显示第一部分，无论分辨率如何（这是重点），但是当我滚动到下半部分时，会有很大的空白空间。我如何摆脱这种差距并无缝过渡（我使用锚样式导航到下半场）

.first-half {height:50vh; background: red;}
.second-half {height:50vh; background: green;}

<div class="first-half">
  content
</div>
<div class="second-half">
  content
</div>

Answer 1

/* For function purposes */
body, html {
    height: 100%;
}

div[class^="fh-"] {
    height: 100%;
}

/* For design purposes */
body {
    margin: 0;
}

.fh-1 {
    background: red;
}

.fh-2 {
    background: blue;
    color: white;
}

<div class="fh-1">content</div>
<div class="fh-2">content</div>

height: 100%onhtml并body确保当我们在divs 上放置 100% 高度时，它将占据整个高度。其余的是一些基本样式，可以清楚地看到分色。