CSS Grid使用minmax(0,1fr)时内容溢出致Footer偏移求助

我用CSS Grid做页面布局，标记为X的Content区域内容过多时，会横向或纵向溢出，把Footer挤出边界。试过给Grid容器设置height、max-height和overflow属性，但内容还是向下挤压Footer，没法让Content占满屏幕剩余空间并限制溢出，该怎么配置？

布局示意图 #

+-------+------------------------------------------+
|       |                                          |
|       +------------------------------------------+
|       |                                          |
|       |                                          |
|       |                                          |
|       |                   x                      |
|       |                                          |
|       |                                          |
|       |                                          |
|       |                                          |
|       +------------------------------------------+
|       |                                          |
+-------+------------------------------------------+

我的SCSS代码 #

.container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0 0;
    grid-auto-flow: column;
    grid-template-areas: "navbar header" "navbar content" "navbar footer";


    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    overflow: hidden;

    .content {
        grid-area: content;
        border-bottom: 1px solid #0002;

        ::ng-deep {
            &>* {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                flex-grow: 1;
                min-height: 100%;
            }
        }

        router-outlet {
            position: absolute;
            min-height: 0 !important;
            height: 0 !important;
            max-height: 0 !important;
        }
    }

    .header {
        grid-area: header;
    }

    .navbar {
        grid-area: navbar;
    }

    .footer {
        float: bottom;
        grid-area: footer;
    }
}

我的HTML代码 #

<div 
    class="container">
    <div 
        class="content">
        <router-outlet>

        </router-outlet>
        <ng-content>

        </ng-content>
    </div>
    <div 
        class="header">
        <header>

        </header>
    </div>
    <div 
        class="navbar">
        <navbar>

        </navbar>
    </div>
    <div 
        class="footer">
        <footer>

        </footer>
    </div>
</div>

核心问题 #

1. Grid容器的height:100%未生效，因为父元素（html/body）没有明确的高度约束，导致容器被内容撑开。
2. Content区域未设置溢出规则，内容过多时会撑大Grid行高，挤压Footer。

具体修改 #

1. 给父元素设置视口高度
   确保html和body占满整个视口，让Grid容器能继承有效高度：

   html, body {
       height: 100vh;
       margin: 0;
       padding: 0;
       overflow: hidden;
   }
   

2. 调整Grid容器高度
   直接用100vh绑定视口高度，替代依赖继承的100%：

   .container {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr);
       grid-template-rows: auto minmax(0, 1fr) auto;
       gap: 0 0;
       grid-auto-flow: column;
       grid-template-areas: "navbar header" "navbar content" "navbar footer";
   
       height: 100vh; /* 改为视口高度 */
       width: 100%;
       overflow: hidden;
       /* 移除冗余的max-height/max-width */
   }
   

3. 配置Content区域的溢出控制
   给Content添加overflow:auto让内容超出时滚动，同时设置min-height:0允许Grid行收缩：

   .content {
       grid-area: content;
       border-bottom: 1px solid #0002;
       overflow: auto; /* 内容超出时显示滚动条 */
       min-height: 0; /* 关键：防止内容撑高Grid行 */
   
       ::ng-deep {
           &>* {
               display: flex;
               flex-direction: column;
               flex-wrap: nowrap;
               flex-grow: 1;
               height: 100%; /* 改为height而非min-height，避免强制撑高 */
           }
       }
   
       router-outlet {
           position: absolute;
           min-height: 0 !important;
           height: 0 !important;
           max-height: 0 !important;
       }
   }
   

4. 移除Footer的无效属性
   float:bottom是无效CSS属性，直接删除：

   .footer {
       grid-area: footer;
       /* 移除float:bottom */
   }
   

修改后效果 #

Grid容器固定占满视口高度，Header和Footer高度由自身内容决定，Content区域自动填充剩余空间；当Content内容过多时，仅在该区域内显示滚动条，不会挤压Footer或溢出容器边界。

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