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

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

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

height: 100%和html上的{p> body确保当我们在div上放置100％的高度时，它将占据整个高度。其余的是一些基本的样式，以清楚地看到分离。