Sass flexbox - 布局

Question

我正在尝试创建带有页眉、页脚、左右导航栏和主要内容的 RWD 布局，但仍有一些不正确的地方。我想要可滚动的主要内容和页脚，但主要内容仍然与页脚重叠。 任何提示将不胜感激

https://jsfiddle.net/camel99/Lqhary5g/5/

//html

<div id="main">
  <header id="header">
    header
  </header>
  <div class="wrapper">
    <ng-container *ngIf="leftSidebarEnabled">
      <div class="sidebar-left sidebar">
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
      </div>
    </ng-container>
    <ng-container *ngIf="rightSidebarEnabled">
      <div class="sidebar-right sidebar">
        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
        voluptas nulla pariatur?
      </div>
    </ng-container>
    <div class="main" [ngClass]="getCssClassesForMainMenu">
      dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
      ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
      aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
      exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui
      dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
      omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
      magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
      quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
      magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
      exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui
      dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
      omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
      magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
      quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
      magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
      exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui
      dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
      omnis iste natus error sit voluptatem accusantium doloremque laudantium,
    </div>
  </div>
  <footer id="footer">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  </footer>
</div>

//css

$headerFooterColor: #4b4276;
$headerFooterHeight: 50px;
$sidebarWidth: 15%;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  text-align: center;
}
#main {
  display: flex;
  flex-direction: column;
}

#header {
  font-size: 1rem;
  height: $headerFooterHeight;
  background-color: $headerFooterColor;
  text-align: center;
  color: white;
  width: 100%;
  left: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  height: $headerFooterHeight;
}

.wrapper {
  display: flex;
  flex: 1 0 0;
  margin-top: $headerFooterHeight;
  .sidebar {
    margin: 0;
    padding: 0;
    width: $sidebarWidth;
    background-color: #b9bcc9;
    position: fixed;
    height: calc(100% - (2 * #{$headerFooterHeight}));
    height: calc(100% - (2 * #{$headerFooterHeight}));
    height: calc(100% - (2 * #{$headerFooterHeight}));
    margin: 0 auto;
    color: white;
  }
  .sidebar-left {
    left: 0;
    order: -1;
  }

  .main {
    background-color: rgba(160, 194, 227, 0.5);
    text-align: center;
    color: white;
    width: 70%;
    height: calc(100% - (2 * #{$headerFooterHeight}));
    overflow: auto;
    flex: 1 0 0;
    &.fullWidth {
      width: 100%;
    }
    &.leftSidebarEnabled {
      margin-left: 15%;
      width: 85%;
    }
    &.rightSidebarEnabled {
      margin-right: 15%;
      width: 85%;
    }
  }

  .sidebar-right {
    right: 0;
    order: 1;
  }
}

#footer {
  font-size: 1rem;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: $headerFooterHeight;
  left: 0;
  background-color: $headerFooterColor;
  text-align: center;
  color: white;
  overflow: auto;
  z-index: 1;
}

Answer 1

将footer 放在.main 中，然后在您的CSS 文件中将position: fixed 中的footer 更改为relative。将侧边栏高度更改为height: 100vh