css height属性中的calc方法详解

当我们为一个元素设置高度时，我们可以使用CSS中的height属性。height属性可以采用相对或者绝对的长度值来设置，但是如果我们需要执行更加复杂的计算操作，这时候便需要使用calc()方法。

calc()方法简介

calc()方法是CSS3中所有浏览器都支持的长度计算方法，它允许你按照特定的算术表达式计算长度。在calc()方法中可以使用四则运算和括号并行运算来计算结果，这让我们有了更强的布局操作能力。

height: calc(100% - 50px);

在上面的示例代码中，我们使用calc()方法将某个元素的高度设置为相对于其父元素高度的百分之九十，减去50像素（px）。这样就可以动态计算出高度，而且不需要设置绝对高度，从而更好地处理自适应和响应式的布局。

使用calc()方法的示例

示例1： 左右双栏等高布局

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main content</div>
</div>

.container {
  display: flex;
  height: 500px;
}
.sidebar {
  width: 200px;
  background-color: #ddd;
  height: calc(100% - 20px);
  margin-right: 10px;
}
.content {
  flex: 1;
  background-color: #eee;
  height: 100%;
}

在这个示例中，我们将一个容器元素设置为flex布局，容器元素的高度被设置为500像素。我们在左边设置了一个宽度为200像素的侧边栏，并将其高度设置为这个容器的高度减去20像素（20像素是侧边栏上下的margin值）。右边的main content被设置为flex子元素，因此默认缩放以填充容器中可用的空间。

示例2： 自定义滚动条高度的计算

<div class="container">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>

.container {
  height: 200px;
  border: 1px solid #ccc;
  overflow-y: scroll;
}
.content {
  height: calc(100% + 20px);
}

在上面的示例中，我们有一个包含滚动条的容器元素，我们想在这个容器中包含比默认的更高的自定义滚动条。我们使用calc()方法将内容高度设置为比容器高度高20像素，这样就可以将滚动条撑得更高，从而达到自定义高度的目的。

在这两个示例中，我们可以看到，使用calc()方法可以让我们更容易地布局元素，在各种情况下更加灵活。