CSS 如何将div的高度设置为100%减去n像素

在本文中，我们将介绍如何使用CSS将一个div元素的高度设置为占据父元素的100%，并减去固定的n像素。

阅读更多：CSS 教程

方法1: 使用calc()

calc()是一种用于执行数学运算的CSS函数。我们可以使用calc()函数来设置div的高度，将父元素的高度减去n像素即可。

.parent {
  height: 100%;
}

.child {
  height: calc(100% - 20px); /* 减去20像素 */
}

在上述示例中，父元素的高度设置为100%，而子元素的高度则使用calc()函数计算得到，结果是父元素高度减去20像素。

方法2: 使用flex布局

Flex布局是CSS中一种强大而灵活的布局方式，它可以很方便地设置子元素的高度占据父元素的剩余空间。

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

.child {
  flex-grow: 1;
  height: 100%;
  margin-bottom: 20px; /* 为了减去20像素的空间 */
}

在上述示例中，我们将父元素的display属性设置为flex，使其成为一个弹性容器。然后，将flex-direction设置为column，使子元素垂直排列。接着，通过将子元素的flex-grow属性设置为1，子元素将占据父元素的剩余空间，然后再将子元素的height属性设置为100%。

方法3: 使用绝对定位和top属性

我们还可以使用绝对定位和top属性来实现div高度减去n像素的效果。

.parent {
  position: relative;
  height: 100%;
}

.child {
  position: absolute;
  top: 0;
  bottom: 20px; /* 为了减去20像素的空间 */
  width: 100%;
}

在上述示例中，我们将父元素的position属性设置为relative，这样子元素的绝对定位将相对于父元素进行。然后，将子元素的position属性设置为absolute，使其脱离文档流。通过设置top和bottom属性，我们可以将子元素的高度减去20像素。

方法4: 使用grid布局

Grid布局是CSS中一种强大的二维布局方式，我们可以使用它来轻松地设置子元素的尺寸和位置。

.parent {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 20px; /* 第一行占据剩余空间，第二行为20px */
}

.child {
  height: 100%;
}

在上述示例中，我们将父元素的display属性设置为grid，使其成为一个网格容器。然后，通过grid-template-rows属性，我们可以设置网格的行尺寸。在这里，我们将第一行的尺寸设置为1fr，它将占据剩余的空间，第二行的尺寸设置为20px。接下来，将子元素的height属性设置为100%，使其占据整个父元素的高度。