添加Angular路由动画后router-outlet高度异常问题

你当前的问题根源是：为了让路由动画生效，给router-outlet的直接子元素设置了绝对定位，这会让组件脱离文档流，无法撑开父容器admin-layout-content。当组件内容高度超过父容器的min-height时，底部内容自然会被截断。

下面提供两种可行的修复方案：

方案一：重构动画容器，避免直接给路由组件加绝对定位 #

这种方法既能保留路由动画效果，又能让组件正常撑开高度，是更推荐的做法。

修改HTML结构 #

给router-outlet外层新增一个专门的动画容器，把动画指令绑定到这个容器上：

<div class="admin-layout-outer">
    <admin-header></admin-header>
    <admin-sidebar></admin-sidebar>
    <div class="admin-layout-inner">
        <ng-scrollbar
            [visibility]="'hover'"
            [appearance]="'compact'"
            [autoHeightDisabled]="false"
            [viewClass]="'custom-scrollbar'"
            [pointerEventsMethod]="'scrollbar'"
            [trackClass]="'custom-scrollbar-track'"
            [thumbClass]="'custom-scrollbar-thumb'"
        >
            <div class="admin-layout-content">
                <!-- 新增动画容器，路由动画绑定到这里 -->
                <div 
                    class="router-animation-container"
                    [@routerAnimation]="adminLayout.isActivated ? adminLayout.activatedRoute : ''"
                >
                    <router-outlet #adminLayout="outlet"></router-outlet>
                </div>
            </div>
        </ng-scrollbar>
    </div>
</div>

调整CSS样式 #

移除之前给路由组件加的绝对定位，确保动画容器和路由组件处于正常文档流：

.admin-layout-outer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--white);
}
.admin-layout-inner {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 70px;
    padding-left: 225px;
    box-sizing: border-box; /* 防止padding导致宽度溢出 */
}
.admin-layout-content {
    width: auto;
    margin: 30px;
    min-height: calc(100vh - 130px);
}
/* 动画容器样式，确保路由组件能正常撑开高度 */
.router-animation-container {
    position: relative;
    width: 100%;
    min-height: 100%;
}
/* 删除之前的绝对定位样式 */
/* ::ng-deep .admin-layout-content > :last-child {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
} */

优化动画代码 #

调整动画中的query目标，确保能正确选中动画容器内的路由组件：

export const routerAnimation = trigger('routerAnimation', [
    transition('* => *', [
        // 给进入的组件临时设置绝对定位，避免动画过程中布局跳动
        query(':enter', [style({ opacity: 0, position: 'absolute', top: 0, left: 0, right: 0 })], { optional: true }),
        group([
            query(':leave', [animate(300, style({ opacity: 0 }))], {
                optional: true
            }),
            query(
                ':enter',
                [style({ opacity: 0 }), animate(300, style({ opacity: 1, position: 'relative' }))],
                { optional: true }
            )
        ])
    ])
]);

方案二：保留绝对定位，但修复高度截断问题 #

如果你不想改动太多结构，可以通过调整父容器的溢出属性和子元素高度规则来解决：

.admin-layout-content {
    width: auto;
    margin: 30px;
    position: relative;
    min-height: calc(100vh - 130px);
    overflow: auto; /* 父容器出现滚动条，容纳超出内容 */
}
::ng-deep .admin-layout-content > :last-child {
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%; /* 用min-height替代height:100%，允许内容撑开高度 */
    position: absolute;
    box-sizing: border-box;
}

这种方法的原理是让父容器可以滚动，同时允许子元素的高度超过父容器的初始高度，避免内容被截断。

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