将内容的高度延伸到整个页面

Question

如何在页面的其余部分上拉伸内容的高度，并在其下方保留10个像素。该页面不应滚动。 vh和calc受到浏览器的很好支持，但我不明白如何正确计算剩余内容的高度

html, body {
padding: 0;
margin: 0;
}
.wrap {
  padding: 10px;
}

.content {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 15px;
  height: calc(100vh - 82px);
}

<div class="wrap">
  <input type="search" placeholder="search">
  <div class="content"></div>
</div>