Question

我一直在尝试创建一个基本的引导页面，我想将中间列的高度设置为响应高度，以便我的页面占据整个屏幕。我使用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网格：）

高度计算根本没有响应

1 个答案: