我需要修复 Bootstrap h-100 类，它不起作用
我在管理面板中有一个侧边栏。我尝试使侧边栏高度为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>
弑天下浏览 110回答 2
2回答
-
素胚勾勒不出你
首先，您不应该将.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 被认为相当容易上手和使用，但它也有一些问题。 -
收到一只叮咚
你应该提到：h-25 、 h-50 、 h-75 和 h-100 根据您父母的身高设置 div 的高度。你有2种方法：设置父母分区的高度在您的 css 文件中使用height = 100 vh您的分区
随时随地看视频慕课网APP
相关分类
Html5