div的响应高度

Question

使用引导程序在一个有角度的网站上工作并遇到了一个小问题。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="content">
      random text
    </div>
  </div>
</div>

css：

.content {
    width: 100vw;
    height: 100vh;
}

我希望.contentdiv 占据整个屏幕大小，仅此而已。但是我上面已经有一个标题元素（固定大小 60 像素），所以使用 100vh 会使它比整个屏幕大小（屏幕大小+标题）略大。

如何以这样的方式格式化我的 css，使.contentdiv 始终具有与屏幕大小完全相同的高度？

Answer 1

你可以使用CSS calc()函数minus的header height是60px从.content高度以下，

calc() CSS 函数允许您在指定 CSS 属性值时执行计算。

.content {
    width: 100vw;
    height: calc(100vh - 60px); /*Add this*/
}

.content {
    width: 100vw;
    height: calc(100vh - 60px); /*Add this*/
}

body {
  margin: 0;
}

header {
  background: red;
  height: 60px; /* Take this value and mius below using calc()*/
  color: #fff;
}

.content {
  width: 100vw;
  height: calc(100vh - 60px); /*Add this*/
}