使用CSS将页面高度划分为两个区块

<div class="container">
  <div class="block1">区块1</div>
  <div class="block2">区块2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.block1 {
  flex: 1; /* 设置区块1占据剩余空间 */
  background-color: #f1f1f1;
}

.block2 {
  flex: 1; /* 设置区块2占据剩余空间 */
  background-color: #e1e1e1;
}

<div class="container">
  <div class="block1">区块1</div>
  <div class="block2">区块2</div>
</div>

.container {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 设置两行等高 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.block1 {
  background-color: #f1f1f1;
}

.block2 {
  background-color: #e1e1e1;
}