我在管理面板中有一個(gè)側(cè)邊欄。我嘗試使側(cè)邊欄高度為100%，但我無(wú)法通過(guò)這種方式解決我的問(wèn)題。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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
首先，您不應(yīng)該將.rows 作為 的直接子級(jí)<body>。您需要將它們包裝在 或.container中.container-fluid。如果不這樣做，您將在不同的屏幕寬度下在頁(yè)面上看到水平滾動(dòng)條。
請(qǐng)注意，您不應(yīng)將 a.container放在 another 內(nèi).container，但可以將 a 放在.containera 內(nèi).container-fluid。
其次，為了.h-100工作，您需要將其沿著子元素鏈傳遞到每個(gè)元素，因?yàn)樗冀K是100%其父元素。如果一個(gè)父元素沒(méi)有它，那么鏈就會(huì)被破壞，并且它的子元素將具有100%（0或者maxContent如果該元素具有一些流內(nèi)容）。
這是您的示例.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 被認(rèn)為相當(dāng)容易上手和使用，但它也有一些問(wèn)題。
收到一只叮咚
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
你應(yīng)該提到：
h-25 、 h-50 、 h-75 和 h-100 根據(jù)您父母的身高設(shè)置 div 的高度。你有2種方法：
設(shè)置父母分區(qū)的高度
在您的 css 文件中使用
height = 100 vh您的分區(qū)
- 2 回答
- 0 關(guān)注
- 177 瀏覽
添加回答
舉報(bào)
0/150
提交
取消