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