Bootstrap 5 Offcanvas在fixed容器中显示异常求助

问题背景 #

将带Offcanvas组件的Bootstrap导航栏置于position: fixed的.whiteHeader容器中后，Offcanvas仅能在该容器内部渲染，无法达到100vh的高度。

原因分析 #

Bootstrap的Offcanvas组件默认会**相对于最近的定位父元素（position: fixed/absolute/relative）**进行定位。由于.whiteHeader是固定定位且高度仅为100px，Offcanvas的显示范围被限制在这个容器内，无法延伸至整个视口高度。

解决方案 #

1. 调整DOM结构，将Offcanvas移出固定容器 #

把Offcanvas元素从.whiteHeader内部移到<body>的直接子层级，使其直接相对于视口定位。触发按钮保留在原位置即可，通过data-bs-target的ID关联依然有效。

修改后的HTML结构示例：

<!-- 固定头部容器 -->
<div class="whiteHeader">
    <nav class="navbar navbar-expand-xxl navbar-light hidden-print">
        <div class="container-fluid ms-5">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
</div>

<!-- Offcanvas移到body直接子元素 -->
<div class="offcanvas offcanvas-start" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
    <div class="offcanvas-header">
        <a class="navbar-brand mx-auto" href="#">
            <img src="" alt="" width="200" height="250" class="d-inline-block align-text-top pt-2">
        </a>
    </div>
    <div class="offcanvas-body">
        <ul class="navbar-nav">
            @if (User.IsInRole("XXX") || User.IsInRole("XXX") || User.IsInRole("XXX"))
            {
                <li class="nav-item"><a class="nav-link @(ViewBag.Title == "Scan" ? "navactive" : "")" asp-area="" asp-controller="Scan" asp-action="Scan"><i class="fa-sharp fa-regular fa-scanner-gun mx-1"></i> @Localizer["Scan"]</a></li>
            }
            @if (User.IsInRole("XXX") || User.IsInRole("XXX"))
            {
                <li class="nav-item"><a class="nav-link @(ViewBag.Title == "List" || ViewBag.Title == "ShowDocument" ? "navactive" : "")" asp-area="" asp-controller="Scan" asp-action="Index"><i class="fa-sharp fa-regular fa-list mx-1"></i> @Localizer["List"]</a></li>
            }
            @if (User.IsInRole("XXX"))
            {
                <li class="nav-item dropdown dmenu">
                    <a class="nav-link dropdown-toggle @(ViewBag.Title == "ApplicationLog" || ViewBag.Title == "ShowLog" || ViewBag.Title == "Usersettings" || ViewBag.Title == "EditUsersettings" ? "navactive" : "")" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="fa-regular fa-gears mx-1"></i>@Localizer["Settings"]</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item @(ViewBag.Title == "ApplicationLog" || ViewBag.Title == "ShowLog" ? "navactive" : "")" asp-area="" asp-controller="ApplicationLog" asp-action="Index"><i class="fa-regular fa-clipboard-list mx-1"></i>@Localizer["Logs"]</a></li>
                    </ul>
                </li>
            }
        </ul>
    </div>
</div>

2. 可选：调整Offcanvas的顶部偏移（如果需要） #

由于.whiteHeader的top值为30px，若希望Offcanvas避开头部区域，可添加自定义CSS调整其位置：

#offcanvasNavbar {
    top: 130px; /* 30px头部top + 100px头部高度 */
    height: calc(100vh - 130px);
}

如果不需要避开，保持Bootstrap默认的top:0即可，Offcanvas会自动占满整个视口高度。

原理说明 #

将Offcanvas移至body直接子元素后，其定位上下文变为视口（<body>），不再受.whiteHeader的高度和定位限制，从而可以正常渲染为100vh高度。

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