我在管理面板中有一個側邊欄。我嘗試使側邊欄高度為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 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 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條經驗 獲得超5個贊
你應該提到：
h-25 、 h-50 、 h-75 和 h-100 根據您父母的身高設置 div 的高度。你有2種方法：
設置父母分區的高度
在您的 css 文件中使用
height = 100 vh您的分區
- 2 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消