因此，我最近一直在学习引导程序的基础知识，并且试图找到一种使行占据页面其余部分的方法，我了解到您可以使用100 vh，但这会使行占据整个页面，如果我有标题，那么它就太低了。
如果我将其更改为75 vh，则仅在100％缩放且未更改的情况下，它就非常合适，所以我要问的是如何使行动态占据页面的其余部分，而没有更多。我不确定如何解决它，也没有看到类似的问题，谢谢您的宝贵时间。旁注：这只是我用来练习引导程序的一个非常基础的站点，我知道它是非常基础的，外观也不好。代码是
的HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
</div>
</body>
</html>
.div1 {
background-color:red;
}
的CSS
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 75vh;
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
}
最佳答案
解决此问题的一种方法是计算（使用CSS calc()属性 [MDN reference]）文档其余部分的高度，该高度为100vh（100％高度）减去标题栏的高度（设置为）。这导致将200px设置为.row。此外，height: calc(100vh - 200px);具有一定的边距，这导致垂直滚动条较小。将边距设置为h1可以解决此问题。
最重要的CSS：
.container-fluid {
height: 100vh;
}
.row {
height: calc(100vh - 200px);
}
请参阅this example in JSFiddle以查看解决方案。
关于html - Bootstrap替代更改vh值以使行占据网页的其余部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47242854/