我在管理面板中有一个侧边栏。我尝试使侧边栏高度为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>
2 回答
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
首先，您不应该将.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 被认为相当容易上手和使用，但它也有一些问题。
收到一只叮咚
TA贡献1821条经验 获得超4个赞
你应该提到：
h-25 、 h-50 、 h-75 和 h-100 根据您父母的身高设置 div 的高度。你有2种方法：
设置父母分区的高度
在您的 css 文件中使用
height = 100 vh您的分区
- 2 回答
- 0 关注
- 109 浏览
添加回答
举报
0/150
提交
取消