Question

使用bootstrap在一个有角度的网站上工作并遇到一个小问题。

HTML

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

的CSS：

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

我希望.content div占用完整的屏幕大小，仅此而已。但是我已经有一个标题元素（固定大小为60px），因此使用100vh会比整个屏幕大小（屏幕大小+标题）稍微多一点。

如何以这样的方式格式化我的CSS：.content div的高度始终与屏幕大小完全相同？

Answer 1

您可以使用CSS calc()功能minus header height 60px .content来自.content { width: 100vw; height: calc(100vh - 60px); /*Add this*/ }高度，如下所示

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

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>

public class EntryDetails
{
  public int EntryId {get;set;}

  public bool EntryActiveFlag

}

Answer 2

您可以使用calc（）; 参见此处：https://developer.mozilla.org/en-US/docs/Web/CSS/calc或https://www.w3schools.com/cssref/func_calc.asp

<style>
    #myDiv {
       width: 100vw;
       height: calc(100vh - 60px);
    }
</style>
<body><div id="myDiv"></body>

Answer 3

使用CSS calc()

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

响应高度的div

3 个答案: