html - 一页网站基本布局

Question

我的单页网站有以下布局，我以前从未做过，所以这是一个学习曲线。

我目前看到的唯一问题是当我缩小页面高度时，div 大小也会缩小，即使我添加了 min-height: 800px;。我该怎么做才能解决这个问题？ (如果我解释不当，使用我的代码并缩小你的页面高度，这样你只能看到背景颜色，然后滚动，你会注意到实际上高度不是 800px)，

div.top,
div.mid,
div.bottom {
  height: 100vh;
  min-height: 800px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
div.top {
  background-color: red;
  top: 0;
}
div.mid {
  background-color: blue;
  top: 100vh;
}
div.bottom {
  background-color: yellow;
  top: 200vh;
}

<div class="top">
  <h1>Top</h1>
</div>

<div class="mid">
  <h1>Mid</h1>
</div>

<div class="bottom">
  <h1>Bottom</h1>
</div>

编辑:解释为什么我使用 position: absolute我使用 position: absolute 这样我就可以使用 top left 和 right 这样我就不会每个 div 都有边距。

没有绝对

使用绝对

Answer 1

body {
  margin: 0;
}
.top, .mid, .bot {
  height: 100vh;
  min-height: 800px;
  width: 100%;
}
.top {
  background: red;
}
.mid {
  background: blue;
}
.bot {
  background: green;
}

 <div class="top">
   <span>top</span>
 </div>
 <div class="mid">
   <span>mid</span>
 </div>
 <div class="bot">
   <span>bot</span>
 </div>