CSS：使 div 填满剩余空间

在本文中，我们将介绍如何使用 CSS 来使 div 元素填满剩余空间。在网页设计中，经常遇到需要将一个 div 元素填充满其父元素剩余空间的情况。这种布局可以使页面更加美观且适应不同屏幕大小。

阅读更多：CSS 教程

flexbox 布局

flexbox 是一种用于页面布局的 CSS3 模块，它提供了一种简便的方式来实现元素的弹性布局。通过使用 flexbox，我们可以很容易地实现 div 元素填满剩余空间的效果。

首先，我们需要通过设置父元素的 display 属性为 “flex” 来创建一个 flexbox 容器。然后，我们可以使用 flex-grow 属性来控制子元素的自动扩展比例。当一个子元素的 flex-grow 值为 1 时，它会平均地分配剩余空间。如果一个子元素的 flex-grow 值为 2，它将会比其他 flex-grow 值为 1 的子元素多占用一倍的剩余空间。

让我们看一个例子。假设我们有一个父元素为宽度为 500px 的 div，里面包含两个子元素。第一个子元素设置了一个固定宽度为 200px，第二个子元素我们希望它填满剩余空间。我们可以使用以下 CSS 代码实现：

.parent {
  display: flex;
  width: 500px;
}

.child1 {
  width: 200px;
  background-color: yellow;
}

.child2 {
  flex-grow: 1;
  background-color: blue;
}

在上面的例子中，第一个子元素的宽度被设置为 200px，第二个子元素的 flex-grow 属性设置为 1。这将使第二个子元素自动填充剩余空间。

grid 布局

另一种实现 div 元素填满剩余空间的方法是使用 CSS grid 布局。grid 布局是 CSS3 提供的一种二维布局系统，可以使我们更加灵活地控制页面的布局。

使用 grid 布局，我们首先需要定义一个网格容器（grid container），并将其子元素（grid item）放在网格容器中的不同网格单元（grid cell）中。默认情况下，子元素会根据其内容自动调整尺寸。然而，我们可以使用 grid-template-columns 属性设置每个网格单元的宽度。

让我们看一个示例，假设我们有一个父元素宽度为 500px 的 div，里面包含两个子元素。我们期望第一个子元素的宽度为 200px，第二个子元素填满剩余空间。我们可以使用以下 CSS 代码实现：

.parent {
  display: grid;
  grid-template-columns: 200px 1fr;
  width: 500px;
}

.child1 {
  background-color: yellow;
}

.child2 {
  background-color: blue;
}

在上面的例子中，我们将父元素的 display 属性设置为 “grid”，并使用 grid-template-columns 属性设置第一个网格单元的宽度为 200px，第二个网格单元使用 1fr 表示剩余空间。这将使第二个子元素填满剩余空间。

总结

通过使用 flexbox 或 grid 布局，我们可以很容易地实现 div 元素填满剩余空间的效果。在 flexbox 布局中，设置子元素的 flex-grow 属性为 1，使其自动扩展并填充剩余空间。在 grid 布局中，使用 grid-template-columns 属性设置每个网格单元的宽度，使其中的一个子元素填满剩余空间。

希望本文能帮助你更好地掌握使用 CSS 填满剩余空间的技巧。无论是网页设计还是响应式布局，这些方法都将为你带来更好的用户体验和页面美观。