[分享]css占剩余空间的1份怎么写

在前端开发中，CSS 是重要的样式语言，常常用于控制网页布局和样式。其中，CSS 中与占剩余空间有关的属性，可以帮助我们更加灵活地控制页面布局和空间分配。本文将介绍 CSS 中占剩余空间的一种常见技巧...

在前端开发中，CSS 是重要的样式语言，常常用于控制网页布局和样式。其中，CSS 中与占剩余空间有关的属性，可以帮助我们更加灵活地控制页面布局和空间分配。本文将介绍 CSS 中占剩余空间的一种常见技巧——使用 flexbox 和 grid 布局来占据剩余空间。

/* 容器div */
.container {
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 设置内容换行 */
  justify-content: space-between; /* 子元素在容器中分布 */
  align-content: stretch; /* 子元素在容器中铺满高度 */
  height: 100vh; /* 设置容器高度占满屏幕 */
}
/* 子元素div1 */
.child1 {
  height: 500px; /* 设置子元素高度 */
  width: 300px; /* 设置子元素宽度 */
}
/* 子元素div2 */
.child2 {
  height: 100%; /* 子元素高度占满剩余空间 */
  width: 300px; /* 设置子元素宽度 */
} 

在上面的示例代码中，我们首先定义了一个父级容器 .container，将它的 display 属性设置为 flex。接着，我们使用 flex-wrap 属性让子元素在容器中换行，并使用 justify-content 属性将子元素在容器中分布。最后，我们设置了 align-content: stretch，这样子元素就会在容器中铺满高度。

对于子元素，我们先定义了两个子元素，它们的高度、宽度分别为 500px/300px 和 auto/300px。其中，.child1 的高度是固定的，.child2 的高度则设置为 100%（可以理解为剩余空间占比），这样它就会占据剩余的所有高度。

使用 flexbox 和 grid 布局来占据剩余空间，可以提高页面空间利用率，使得页面更加美观、简洁。除此之外，CSS 中还有很多与占剩余空间有关的属性，比如 position、calc、auto 等，需要我们在项目中灵活运用。