修复了一个溢出内容和一个固定内容的侧边栏

Question

我正在做一个简单的布局，但有一件事让我很烦。 我想要一个包含两列、全高、侧边栏和内容的布局。 在侧边栏中，我想要两件事：

• 一个按钮将位于底部，固定高度。
• 将在剩余空间中居中的一个 div，流体高度。

我尝试兼容 IE 9。

这是基本布局：

<aside>
  <div class="wrapper">
    <nav>
      <ul>
        <li>Item menu</li>
        <li>Item menu</li>
        <li>Item menu n</li>          
      </ul>
    </nav>
  </div>
  <a class="btn">
    button must be at the bottom
  </a>
</aside>
<main>
  My content
</main>

还有基本的css：

* { margin:0; padding: 0; box-sizing:border-box; }
html, body { height: 100%; }
aside, main { height: 100%; }
aside {
  position:fixed;
  left:0;
  top:0;
  width: 200px;
  background:#eee;
}
main {
  width: calc(100% - 200px);
  margin-left:200px;
}

目前，当窗口高度较小时，我尝试的任何操作都会导致出现问题。 （菜单上方的按钮，或者菜单没有滚动条等...）

我尝试过的：

• aside{display:table}、.wrapper{display:tablle-cell; vertical-align:middle} 和 .btn{position: fixed; bottom:0; left:0;}
• nav{top:50%; transform:translateY(-50%);} 但是，导航的内容会出现在视口之上...
• 还有一点 flexbox，但我无法达到想要的结果。

如果您需要更多信息，我们非常欢迎您提供。 谢谢。

Answer 1

这应该可以帮助您入门。

更新

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

aside,
main {
  /*   height: 100%; */
  /*   width: 100%; */
}

aside {
  flex-grow: 1;
  background: #eee;
  padding: 5px;
}

main {
  flex-grow: 6;
  background: #ddd;
  padding: 20px;
  height: 100vh;
  overflow-y: scroll;
}

.wrapper {
  display: flex;
  height: 100vh;
  justify-content: space-between;
  flex-direction: column;
}

.btn {
  margin: 20px auto;
  background: #bada55;
  padding: 20px;
}

<aside>
  <div class="wrapper">
    <nav>
      <ul>
        <li>Item menu</li>
        <li>Item menu</li>
        <li>Item menu n</li>
      </ul>
    </nav>
    <a class="btn">
button
  </a>
  </div>

</aside>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
    ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati
    eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet
    distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio
    provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.</p>
</main>