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);
      }
    }
  }
}