Bootstrap 5无法设置main-container高度为100%的问题求助

问题根源 #

设置height:100%无效的核心原因是父元素没有明确的高度基准，浏览器无法计算百分比高度对应的实际值。直接用94vh高度过高，是因为没有精准扣除顶部固定导航栏占用的空间。

具体解决方案 #

按以下步骤修改CSS：

1. 给根元素和body设置高度基准

html, body {
    height: 100%;
    margin: 0;
}

2. 让.main-container占满导航栏下方的剩余视口高度
   利用calc()精准扣除导航栏的3.5rem高度，避免固定vh值带来的适配问题：

.main-container {
    height: calc(100vh - 3.5rem);
    /* 若内容可能溢出，改用min-height: calc(100vh - 3.5rem); 防止内容被截断 */
}

3. 让侧边栏占满.main-container的高度
   现在父容器有了明确高度，直接设置height:100%即可生效：

#side_nav {
    background: #ffffff;
    min-width: 300px;
    max-width: 300px;
    position: relative;
    border-right: 1px solid #cbd0dd;
    height: 100%; /* 添加此行 */
}

4. （可选）让主内容区也占满高度
   如果.content需要和侧边栏同高，同样添加高度设置：

.content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 添加此行 */
}

最终效果 #

修改后，.main-container会刚好填满导航栏下方的整个视口区域，侧边栏和主内容区也会自动占满容器高度，不会出现高度溢出或不足的问题。

内容的提问来源于stack exchange，提问作者GrootStack