CSS 如何使一个元素填充剩余的视口高度

在本文中，我们将介绍如何使用CSS来使一个元素填充剩余的视口高度。

在设计网页布局时，经常会遇到一个问题，即希望一个元素（如侧边栏）填充剩余的视口高度，以便内容区域和底部保持一致的高度。下面是一些使用CSS的方法来实现这一目标的示例。

阅读更多：CSS 教程

方法一：使用flexbox布局

flexbox布局是CSS3中引入的一种弹性盒子布局模型，它可以轻松地实现元素的自适应布局。下面是使用flexbox布局的示例代码：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

.content {
  flex: 1;
}

.sidebar {
  background-color: #f0f0f0;
}

在上面的示例中，我们首先将html和body元素的高度设置为100%，以确保页面占满整个视口。然后，使用flexbox布局将.container元素设置为一个垂直方向的弹性盒子，并将高度设置为100%，以使其填充剩余的视口高度。通过将.content元素的flex属性设置为1，它将占据剩余的空间，并自动填充剩余的视口高度。另外，我们还可以将.sidebar元素设置为一个侧边栏，并设置对应的背景颜色。

方法二：使用绝对定位

另一种方法是使用绝对定位来使元素填充剩余的视口高度。下面是一个使用绝对定位的示例代码：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  min-height: 100%;
}

.content {
  margin-bottom: 100px; /* 底部高度 */
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #f0f0f0;
}

在上面的示例中，我们也首先将html和body元素的高度设置为100%，以确保页面占满整个视口。然后，将.container元素的最小高度设置为100%，以使其至少占满整个视口高度。通过设置.content元素的下边距为底部高度（这里为100px），可以给.sidebar元素留出空间，使其填充剩余的视口高度。通过将.sidebar元素设置为绝对定位，并指定top和bottom属性，我们可以将其垂直方向上拉伸至整个视口高度，并设置对应的宽度和背景颜色。