在 CSS 中垂直分割屏幕

在网站设计中，我们经常需要将页面分成多个部分，但这些部分不一定要占据整个屏幕。本指南将重点介绍如何在 CSS 中实现页面的垂直分割。

使用 flexbox

Flexbox 是 CSS3 中的新功能，它可以帮助快速和轻松地创建响应式布局。许多浏览器都支持 Flexbox，它被广泛使用于网站设计中。

以下是如何在 CSS 中使用 flexbox 垂直分割屏幕的代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  /* 将上部分高度设为 50% */
  flex: 1 1 50%;
  background-color: #eee;
}

.bottom {
  /* 将下部分高度设为 50% */
  flex: 1 1 50%;
  background-color: #ccc;
}

在上面的代码中，我们首先为容器 .container 设置了 display:flex 属性，这意味着其子元素会自动弹性地进行布局。接着，我们将 .container 的 height 属性设为 100vh，这将使它的高度等于屏幕高度。

接下来，我们将上部分和下部分分别定义为 .top 和 .bottom。我们将它们的高度设置为 50%，它们都将占据 .container 的一半空间。这是通过 flex 属性 flex: 1 1 50%; 实现的，其中 1 1 分别代表 flex-grow 和 flex-shrink 属性，50% 则是 flex-basis 属性，最终确定了它们在容器中的比例。

使用 Grid

CSS Grid 是另一种用于创建布局的 CSS3 功能，可以使网页布局变得更加易于维护。与 Flexbox 相比，它可以更方便地处理网格状结构，并且通常更适合于复杂的布局需求。

以下是使用 CSS Grid 在 CSS 中进行垂直分割的代码：

.container {
  display: grid;
  grid-template-rows: 50% 50%;
}

.top {
  background-color: #eee;
}

.bottom {
  background-color: #ccc;
}

在上述代码中，我们将 .container 定义为一个网格布局，并使用 grid-template-rows 属性将它分成两个行，每个行高度都为 50%。 .top 和 .bottom 分别表示两个网格中的单元格。由于我们没有设置它们的高度，它们将自动分别占据 .container 的上半部分和下半部分。

以上是两种可以使用 CSS 在网页中进行垂直分割的方法。根据实际需求，选择适合的方式来实现你的网站设计。