身高计算器完全没有反应

Question

我一直在尝试制作一个基本的 bootstrap 页面，我想将中间列的高度设置为响应高度，以便我的页面占据整个屏幕。我用 This SO link 试图弄清楚，并实施了他们在那里也有的解决方案，但仍然没有用。如果有什么我可以指定或更好地解释以写出更好的问题，请这样说。我不确定它有什么问题，所以对于如何进行这项工作，我们将不胜感激。谢谢！

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#header {
  height: 150px;
  background-color: red;
}

#footer {
  height: 150px;
  background-color: orange;
}

#col1 {
  background-color: blue;
}

#col2 {
  background-color: green;
}

#col3 {
  background-color: yellow;
}

.maincol {
  height: calc(100% - 300px);
  height: -moz-calc(100% - 300px);
  height: -webkit-calc(100%-300px);
  display: block;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS/Bootstrap/jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <!--Header of page-->
  <div class="container-fluid">
    <div class="row" id="header">
      <div class="col-sm-12">Some text</div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 maincol" id="col1">Some text</div>
      <div class="col-sm-4 maincol" id="col2">Some text</div>
      <div class="col-sm-4 maincol" id="col3">Some text</div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div class="row" id="footer">
      <div class="col-sm-12">Some text</div>
    </div>
  </div>
</body>

Answer 1

如果你的目标是现代浏览器，试试这个：

.maincol {
  height: calc(100vh - 300px);
  height: -moz-calc(100vh - 300px);
  height: -webkit-calc(100vh-300px);
  display: block;
}

或者如果可以的话切换到 bootstrap 4 并使用 flex grid :)

身高计算器完全没有反应

Height calc isn't responding at all

html

css

twitter-bootstrap

twitter-bootstrap-4