让 div 占用剩余空间

在一些情况下，我们需要让一个 div 元素占据剩余的空间。比如，我们想让一个侧栏（sidebar）占据左边一定的宽度，而剩下的空间则是主内容区域（main content）。本文将介绍如何实现这个效果。

1. 使用 flexbox 布局

使用 flexbox 布局可以非常简单地实现 div 元素占据剩余空间的效果。我们可以把 div 元素的父元素设置为一个 flex 容器，然后让 div 元素的 flex 属性为 1，这样 div 元素就会占据剩余空间。以下是一个示例：

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

<style>
.container {
  display: flex;
}

.sidebar {
  flex: 0 0 200px; /* 固定宽度，也可以使用百分比或 auto */
}

.main {
  flex: 1; /* 占据剩余空间 */
}
</style>

上面的示例中，.sidebar 元素固定为 200 像素的宽度，.main 元素则会占据剩余的宽度。

2. 使用 grid 布局

使用 grid 布局也可以实现类似的效果。我们可以把 div 元素的父元素设置为一个 grid 容器，并把这个容器划分为两个网格列。然后，让 div 元素占据第二个网格列，这样它就会占据剩余空间。下面是一个示例：

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 划分两个网格列，第二个列为剩余空间 */
}

.sidebar {
  grid-column: 1 / 2; /* 占据第一个网格列 */
}

.main {
  grid-column: 2 / 3; /* 占据第二个网格列 */
}
</style>

上面的示例中，.sidebar 元素占据第一个网格列，宽度为 200 像素，.main 元素占据第二个网格列，它会占据剩余的宽度。

总结

本文介绍了使用 flexbox 和 grid 布局让 div 元素占据剩余空间的两种方法。这两种方法都非常简单，而且兼容性也比较好，可以满足大部分的需求。如果你有其他的实现方法，欢迎在评论区留言。