amis/scss/layout/_layout.scss

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
}

.#{$ns}Layout {
    height: auto;
    min-height: 100%;
    width: 100%;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        width: inherit;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: $body-bg;
        border: inherit;
        display: block;
    }

    &--boxed {
        margin-right: auto;
        margin-left: auto;
        // box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    }

    .#{$ns}Layout-header {
        background: $Layout-header-bg;
        box-shadow: $Layout-header-boxShadow;
        height: $Layout-header-height;
    }

    &--headerFixed {
        padding-top: $Layout-header-height;

        .#{$ns}Layout-header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: $zindex-fixed;
        }
    }

    &-brandBar {
        background: $Layout-brand-bg;
        color: $Layout-brandBar-color;

        >button {
            padding: px2rem(10px) px2rem(17px);
            font-size: px2rem(16px);
            line-height: $Layout-header-height - px2rem(20px);
            text-decoration: none;
            background-color: transparent;
            border: none;
        }
    }

    &-brand {
        color: $Layout-brand-color;
        text-align: left;
        font-size: $fontSizeMd;
        font-weight: $fontWeightNormal;
        max-width: 100%;
        height: auto;
        line-height: $Layout-header-height;
        display: inline-block;
        vertical-align: middle;
        padding: 0 px2rem(20px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
            text-decoration: none;
        }

        img {
            max-height: $Layout-header-height / 2;
            // margin-top: px2rem(-4px);
            vertical-align: middle;
            display: inline;
        }
    }

    &-headerBar {
        border-bottom: $Layout-headerBar-borderBottom;
        min-height: $Layout-header-height;
        padding: 0 $gap-sm;
    }

    &-aside {
        float: left;
        background: $Layout-aside-bg;
        color: $Layout-aside-color;

        &:before {
            content: "";
            position: absolute;
            width: inherit;
            top: 0;
            bottom: 0;
            z-index: -1;
            background-color: inherit;
            border: inherit;
        }
    }

    &-asideFooter {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: $zindex-fixed;
        max-width: $Layout-aside-width;

        // .app-aside-folded & {
        //     max-width: @app-aside-folded-width;
        // }
        ~div {
            padding-bottom: px2rem(50px);
        }
    }

    &-content {
        height: 100%;
        @include clearfix();
    }

    // &-content--full {
    //     position: absolute;
    //     top: $Layout-header-height;
    //     bottom: $Layout-header-height;
    //     height: auto;
    //     width: auto !important;
    //     padding: 0 !important;
    //     overflow-y: auto;
    //     -webkit-overflow-scrolling: touch;

    //     &.h-full {
    //         bottom: 0;
    //         height: auto;
    //     }
    // }

    &-body {
        padding-bottom: $Layout-header-height;
        width: 100%;
    }

    &--noFooter &-body {
        padding-bottom: 0;
    }

    &-content &-body {
        float: left;
    }

    &-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        // z-index: 1005; 为啥要这么高
        z-index: 0;
    }

    &--sm {
        .#{$ns}Layout-asideFooter {
            max-width: $Layout-aside--sm-width;
        }

        .#{$ns}AsideNav-item a {
            font-size: $fontSizeSm;
        }
    }

    &--md .#{$ns}Layout-asideFooter {
        max-width: $Layout-aside--md-width;
    }

    &--lg .#{$ns}Layout-asideFooter {
        max-width: $Layout-aside--lg-width;
    }
}


@include media-breakpoint-down(sm) {
    .#{$ns}Layout {
        // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果
        // overflow-x: hidden;
    }



    .#{$ns}Layout-content {
        transition: transform 0.2s ease;
    }

    .#{$ns}Layout-aside {
        display: none;

        .#{$ns}Layout--offScreen & {
            position: fixed;
            top: px2rem(50px);
            bottom: 0;
            width: $Layout--offscreen-width;
            display: block !important;
            visibility: visible;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 1010;
        }
    }

    .#{$ns}Layout-headerBar {
        display: none;
    }

    .#{$ns}Layout--offScreen {

        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
            background-color: $body-bg;
            transition: transform 0.2s ease;
            backface-visibility: hidden;
            transform: translate3d($Layout--offscreen-width, 0px, 0px);
            overflow: hidden;
            position: fixed;
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1015;
            padding-top: px2rem(50px);
        }
    }
}


@include media-breakpoint-up(md) {
    .#{$ns}Layout {
        &--boxed {
            width: px2rem(760px);

            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
                width: px2rem(760px);
            }
        }

        &-brand,
        &-brandBar,
        &-aside {
            width: $Layout-aside-width;
        }

        &-brandBar {
            float: left;
        }

        &--withAside {

            .#{$ns}Layout-headerBar,
            .#{$ns}Layout-content,
            .#{$ns}Layout-footer {
                margin-left: $Layout-aside-width;
            }
        }

        .visible-folded {
            display: none;
        }

        &--folded {
            .visible-folded {
                display: inherit;
            }

            .hidden-folded {
                display: none !important;
            }

            .text-center-folded {
                text-align: center;
            }

            .pull-none-folded {
                float: none !important;
            }

            .w-auto-folded {
                width: auto;
            }

            .#{$ns}Layout-aside,
            .#{$ns}Layout-brandBar {
                width: $Layout-aside--folded-width;
            }

            &.#{$ns}Layout--withAside {

                .#{$ns}Layout-headerBar,
                .#{$ns}Layout-content,
                .#{$ns}Layout-footer {
                    margin-left: $Layout-aside--folded-width;
                }
            }

            .#{$ns}Layout-brand {
                display: block;
                padding: 0;
                font-size: $fontSizeLg;
                text-align: center;
            }
        }

        &--asideFixed {
            .#{$ns}Layout-aside {
                height: 100%;

                &:before {
                    position: fixed;
                    z-index: 15;
                }
            }

            .#{$ns}Layout-brandBar {
                position: fixed;
            }

            .#{$ns}Layout-asideWrap {
                position: fixed;
                overflow: hidden;
                top: $Layout-header-height;
                bottom: 0;
                left: 0;
                width: $Layout-aside-width - px2rem(1px);
                z-index: $zindex-fixed;
            }

            .#{$ns}Layout-asideInner {
                width: $Layout-aside-width + $scrollbar-width;
                position: relative;
                height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                }

                &::-webkit-scrollbar:vertical {
                    width: $scrollbar-width;
                }

                &>* {
                    width: $Layout-aside-width;
                }
            }
        }

        &--asideFixed.#{$ns}Layout--folded {
            .#{$ns}Layout-aside {
                position: static;
            }

            .#{$ns}Layout-brandBar {
                position: static;
            }

            .#{$ns}Layout-asideWrap {
                overflow: visible;
                position: relative;
                top: 0;
                z-index: 15;
                width: $Layout-aside--folded-width - px2rem(1px);
            }

            .#{$ns}Layout-asideInner {
                overflow: visible;
                width: $Layout-aside--folded-width + $scrollbar-width;

                >* {
                    width: $Layout-aside--folded-width;
                }
            }
        }

        &--sm:not(.#{$ns}Layout--folded) {

            .#{$ns}Layout-brand,
            .#{$ns}Layout-brandBar,
            .#{$ns}Layout-aside {
                width: $Layout-aside--sm-width;
            }

            &.#{$ns}Layout--withAside {

                .#{$ns}Layout-headerBar,
                .#{$ns}Layout-content,
                .#{$ns}Layout-footer {
                    margin-left: $Layout-aside--sm-width;
                }
            }

            &.#{$ns}Layout--asideFixed {
                .#{$ns}Layout-asideWrap {
                    width: $Layout-aside--sm-width - px2rem(1px);
                }

                .#{$ns}Layout-asideInner {
                    width: $Layout-aside--sm-width + $scrollbar-width;

                    &>* {
                        width: $Layout-aside--sm-width;
                    }
                }
            }
        }

        &--md:not(.#{$ns}Layout--folded) {

            .#{$ns}Layout-brand,
            .#{$ns}Layout-brandBar,
            .#{$ns}Layout-aside {
                width: $Layout-aside--md-width;
            }

            &.#{$ns}Layout--withAside {

                .#{$ns}Layout-headerBar,
                .#{$ns}Layout-content,
                .#{$ns}Layout-footer {
                    margin-left: $Layout-aside--md-width;
                }
            }

            &.#{$ns}Layout--asideFixed {
                .#{$ns}Layout-asideWrap {
                    width: $Layout-aside--md-width - px2rem(1px);
                }

                .#{$ns}Layout-asideInner {
                    width: $Layout-aside--md-width + $scrollbar-width;

                    &>* {
                        width: $Layout-aside--md-width;
                    }
                }
            }
        }

        &--lg:not(.#{$ns}Layout--folded) {

            .#{$ns}Layout-brand,
            .#{$ns}Layout-brandBar,
            .#{$ns}Layout-aside {
                width: $Layout-aside--lg-width;
            }

            &.#{$ns}Layout--withAside {

                .#{$ns}Layout-headerBar,
                .#{$ns}Layout-content,
                .#{$ns}Layout-footer {
                    margin-left: $Layout-aside--lg-width;
                }
            }

            &.#{$ns}Layout--asideFixed {
                .#{$ns}Layout-asideWrap {
                    width: $Layout-aside--lg-width - px2rem(1px);
                }

                .#{$ns}Layout-asideInner {
                    width: $Layout-aside--lg-width + $scrollbar-width;

                    &>* {
                        width: $Layout-aside--lg-width;
                    }
                }
            }
        }
    }
}


@include media-breakpoint-up(lg) {
    .#{$ns}Layout {
        &--boxed {
            width: px2rem(980px);

            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
                width: px2rem(980px);
            }
        }
    }
}

@include media-breakpoint-up(xl) {
    .#{$ns}Layout {
        &--boxed {
            width: px2rem(1180px);

            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
                width: px2rem(1180px);
            }
        }
    }
}