使用CSS将页面高度划分为两个区块_在双列页面上,如何使用CSS或Javascript将左div增加到右div的相同高度？ - 腾讯云开发者社区

可以通过使用Flexbox或Grid布局来实现。

使用Flexbox布局： Flexbox是一种弹性盒子布局模型，可以轻松实现页面的灵活布局。以下是将页面高度划分为两个区块的示例代码：

HTML代码：

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

CSS代码：

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

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

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

在上述代码中，.container 是包含两个区块的容器，使用 display: flex 将其设置为弹性盒子布局。flex-direction: column 将子元素垂直排列。.block1 和 .block2 是两个区块，通过设置 flex: 1 让它们占据剩余空间。

使用Grid布局： Grid布局是一种二维网格布局模型，可以更精确地控制页面布局。以下是将页面高度划分为两个区块的示例代码：

HTML代码：

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

CSS代码：

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

.block1 {
  background-color: #f1f1f1;
}

.block2 {
  background-color: #e1e1e1;
}

在上述代码中，.container 是包含两个区块的容器，使用 display: grid 将其设置为网格布局。grid-template-rows: 1fr 1fr 将容器分为两行，并使它们等高。.block1 和 .block2 是两个区块，它们会自动填充各自的行。

以上是使用CSS将页面高度划分为两个区块的示例代码。根据具体需求和页面结构，可以选择适合的布局方式来实现。