如何实现SideBar组件在屏幕最大宽度500px时占满全屏？

要实现屏幕宽度≤500px时SideBar组件占据全屏宽度，需要调整布局结构和样式细节，以下是具体修改方案：

1. 修正MainPage的布局样式 #

.main-page默认是横向flex布局，移动端需改为垂直排列，同时隐藏主内容区域：

.main-page {
    display: flex;
    margin: 0;
    padding: 0;
    min-height: 664px;

    // 移动端切换为垂直布局
    @media screen and (max-width: 500px) {
        flex-direction: column;
    }

    .main-content {
        display: flex;
        margin-left: 16px;
        background-color: white !important;
        border-radius: 20px;
        flex-direction: column;
        flex: 1; // 让主内容占据剩余空间

        @media screen and (max-width: 500px) {
            width: 0;
            margin-left: 0;
            overflow: hidden; // 彻底隐藏主内容
        }
    }
}

2. 调整SideBar的自适应样式 #

修改SideBar的移动端样式，确保全屏宽度且无横向溢出，同时适配内部列表容器：

.side-bar {
    background-color: white;
    display: flex;
    width: 140px;
    height: 100vh;
    padding: 16px 20px 20px 30px;
    top: 2px;

    /* 平板适配 */
    @media only screen and (max-width: 1000px) {
        width: 40%;
    }

    /* 移动端全屏适配 */
    @media only screen and (max-width: 500px) {
        width: 100%;
        padding: 16px 20px; // 减少左右内边距，避免横向滚动
        height: 100vh; // 保持占满视口高度，若需自适应内容可改为auto
    }

    .list-container {
        width: 90px;
        height: 361px;
        display: flex;
        gap: 16px;
        flex-direction: column;

        @media only screen and (max-width: 500px) {
            width: 100%; // 自适应侧边栏宽度
            height: auto; // 高度随内容变化
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
        }
    }
}

关键修改说明 #

• 移动端将.main-page的flex方向改为column，确保SideBar和主内容垂直排列，此时SideBar的width:100%能占满屏幕宽度。
• 主内容区域在移动端设置overflow:hidden，彻底隐藏内容，避免多余空间占用。
• SideBar的移动端样式调整内边距，防止因padding导致宽度超出视口出现横向滚动条，同时让内部列表容器自适应宽度，保证内容正常显示。

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