我在管理面板中有一个侧边栏。我尝试使侧边栏高度为100%，但我无法通过这种方式解决我的问题。
https://jsfiddle.net/irankhosravi/u96nykbx/1/
<html class="h-100">
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="h-100">
<div class="row h-100">
<div class="col-md-2 h-100 bg-success" id="sidebar"></div>
<div class="col-md-10 bg-danger" style="height: 500px;"></div>
</div>
</body>
</html>
And*_*hiu 13
首先，您不应该将.rows 作为 的直接子级<body>。您需要将它们包装在 或.container中.container-fluid。如果不这样做，您将在不同的屏幕宽度下在页面上看到水平滚动条。
请注意，您不应将 a.container放在 another 内.container，但可以将 a 放在.containera 内.container-fluid。
其次，为了.h-100工作，您需要将其沿着子元素链传递到每个元素，因为它始终是100%其父元素。如果一个父元素没有它，那么链就会被破坏，并且它的子元素将具有100%（0或者maxContent如果该元素具有一些流内容）。
这是您的示例.container：
<html class="h-100">
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="h-100">
<div class="container h-100">
<div class="row h-100">
<div class="col-md-2 h-100 bg-success" id="sidebar"></div>
<div class="col-md-10 bg-danger h-100"></div>
</div>
</div>
</body>
</html>这是.container-fluid：
<html class="h-100">
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="h-100">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-md-2 h-100 bg-success" id="sidebar"></div>
<div class="col-md-10 bg-danger h-100"></div>
</div>
</div>
</body>
</html>虽然 Bootstrap 被认为相当容易上手和使用，但它也有一些问题。在获得它们之前，请仔细阅读文档并依赖它们的示例。
| 归档时间： |
|
| 查看次数： |
17413 次 |
| 最近记录： |