html - div的响应高度

Question

使用 Bootstrap 在 Angular 网站上工作并遇到一个小问题。

HTML

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

CSS:

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

我希望 .content div 占据整个屏幕大小，仅此而已。但是我上面已经有一个标题元素(固定大小 60 像素)，因此使用 100vh 会使其略大于整个屏幕大小(屏幕大小 + 标题)。

如何格式化我的 css，使 .content div 的高度始终与屏幕大小一致？

Answer 1

您可以使用 CSS calc() 函数从 减去 header height，即 60px >.content 高度如下，

The calc() CSS function lets you perform calculations when specifying CSS property values.

.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*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>Header</header>
<div class="container-fluid">
  <div class="row">
    <div class="content">
      random text
    </div>
  </div>
</div>