html - 固定侧边栏，一个内容溢出，一个内容固定

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:table-cell; vertical-align:middle} with .btn{position: fixed;底部:0；左:0；
• nav{top:50%; transform:translateY(-50%); 但是，导航的内容会出现在视口(viewport)顶部...
• 还有一些 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>