我正在使用 bootstrap 4，但我不知道如何正确获取我的高度。我有一个“侧导航”、“页眉”、“主”和“页脚”。
我希望“main”占据大部分高度。然而，由于某种原因，我的高度一定被搞乱了，因为侧殿并没有一直向下，我在左下角得到了这个白色的 block 。
如果你在我的代码上全屏显示，你就会看到它。
body,
html,
.container-fluid {
height: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
background-color: blue;
color: white;
}
@media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<!-- Bootstrap CSS CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper h-100">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid ">
<div class="row h-100">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 h-100" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
当前的问题是，在 row 上使用 h-100 会使子 col-12 也设置为 h-100 超过视口(viewport)高度，导致滚动和侧边栏下方的空白。
从 Bootstrap 4.1 开始，有一个 flex-fill util 类对这种布局很有帮助...
.flex-fill {
flex: 1 1 auto;
}
在这种情况下，您可以使用它使子 div 增长以填充剩余高度。只需在 .wrapper 上设置 min-height:
.wrapper {
min-height: 100vh;
}
然后，使 container-fluid 也是一个 Flexbox 容器(使用 d-flex)。使用 util flex-fill 使 row 和中间 col-12 填充高度:
<div class="wrapper d-flex">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid d-flex flex-column">
<div class="row flex-fill flex-column">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 flex-fill" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
关于html - 如何设置列高 - Bootstrap 4？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49585435/