Blazor窗口缩放时Header横向滚动留白问题求助

问题描述 #

正常情况下内容适配窗口时，顶部Header无空白：

但缩小窗口并向右滚动时，Header出现空白：

核心问题：当content容器内容过长时，Header不会跟随内容宽度拉伸，导致横向滚动后出现空白区域。

相关代码 #

MainLayout #

<div class="page">
   <Sidebar />

    <div class="main">
        <Header />

        <article class="content px-4">
            <AuthorizeView>
                <NotAuthorized>
                    <div class="row">
                        <div class="col-md-4">
                            <p>Please sign in to use the Platform...</p>
                        </div>
                    </div>
                </NotAuthorized>
                <Authorized>
                   @Body
                </Authorized>
            </AuthorizeView>
        </article>

    </div>
</div>

Page CSS #

.page {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
}

Main CSS #

.main {
    flex: 1;
    top: 0px;
    left: 0px;
    overflow-y: scroll;
}

Sidebar CSS #

.sidebar {
    top: 0px;
    left: 0px;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.sidebar_clp { /* Colapsed State */
    width: 110px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidebar_exp { /* Expanded State */
    width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

Header CSS #

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
}

Content CSS #

.content {
    padding-top: 1.1rem;
    flex: 1;
    top: 0px;
    left: 0px;
}

解决思路及代码修改 #

原因分析 #

.main容器仅设置了overflow-y: scroll，未处理横向滚动场景，且未设置最小宽度跟随内容撑开。Header的sticky定位基于.main容器，当内容横向溢出时，.main宽度未适配内容，导致Header仅占容器初始宽度，滚动后出现空白。

具体修改 #

1. 调整.main容器CSS：添加横向滚动支持，并确保容器宽度适配内容

.main {
    flex: 1;
    top: 0px;
    left: 0px;
    overflow-y: scroll;
    overflow-x: auto; /* 开启横向滚动 */
    min-width: fit-content; /* 确保容器宽度至少适配内容 */
}

2. 优化Header的宽度适配：强制Header填充容器宽度，并适配内容宽度

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%; /* 填充容器宽度 */
    min-width: fit-content; /* 跟随内容宽度调整 */
}

3. 调整Content容器宽度：确保内容容器不限制内部元素宽度

.content {
    padding-top: 1.1rem;
    flex: 1;
    width: 100%; /* 填充容器宽度 */
    min-width: fit-content; /* 适配内部长内容 */
}

4. 可选：优化.page容器宽度：避免窗口缩小时容器被过度压缩

.page {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100vh;
    min-width: 100%; /* 改为最小宽度100% */
}

修改效果 #

上述修改后，.main容器会根据内容自动调整宽度，Header作为sticky元素会跟随容器宽度变化，横向滚动时Header会被完全撑开，不再出现空白区域。

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