我能想出如何設(shè)置我的身高。主容器高度至100%。

看起來像這樣在這里輸入圖像描述 當(dāng)我這樣做的時(shí)候，我不能把我的工具條設(shè)置為100%

.main-container {
    height: 94vh;
}

高度太高了。

這是我的一些代碼，我正在使用bootstrap 5: 導(dǎo)航條:

<nav class="navbar fixed-top custom-navbar">

要定位我的邊欄和主頁，請(qǐng)使用:

<div class="main-container d-flex">
    <div id="side_nav">...</div>
    <div class="content">...</div>
</div>

鋼性鑄鐵

body {
    background: #f5f7fa;
    padding-top: 3.5rem;
}
.content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#side_nav {
    background: #ffffff;
    min-width: 300px;
    max-width: 300px;
    position: relative;
    border-right: 1px solid #cbd0dd;
}

這類似于:Bootstrap Navbar和內(nèi)容填充高度flexbox和此問題，因?yàn)锽ootstrap 5 flexbox的工作方式相同。

"100% & quot；和& quot填充剩余高度& quot是兩碼事。我認(rèn)為你所要求的是100%高度布局，其中主容器不超過視窗高度，并填充剩余空間。

body {
    background: #f5f7fa;
    padding-top: 3.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.content {
    width: 100%;
    display: flex;
    justify-content: center;
}

#side_nav {
    background: #ffffff;
    min-width: 300px;
    max-width: 300px;
    position: relative;
    border-right: 1px solid #cbd0dd;
}

<nav class="navbar fixed-top custom-navbar"> Nav </nav>
<div class="main-container d-flex bg-light flex-grow-1 overflow-auto">
    <div id="side_nav" class="overflow-auto">
        <h1>sidebar</h1>
    </div>
    <div class="content overflow-auto">
        <h1>content</h1>
        ...
    </div>
</div>

https://codeply.com/p/8P05IqFLFY