Fixed sidebar with one overflowing content and one fixed content

Question

I'm working on a simple layout, but one thing is bugging me. I want a layout with two columns, full height, a sidebar and the content. Inside the sidebar, I want two things:

• One button that will be positioned at the bottom, fixed height.
• One div that will be centered in the remaining space, fluid height.

I try to be IE 9 compatible.

This is the basic layout:

<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>

And the basic 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;
}

For now, anything I try result in having problem when the window height is small. (The button over the menu, or no scrollbar for the menu, etc...)

What I've tryed:

• aside{display:table}, .wrapper{display:tablle-cell; vertical-align:middle} with .btn{position: fixed; bottom:0; left:0;}
• nav{top:50%; transform:translateY(-50%);} but then, there is a point where the content of the nav will go on top of the viewport...
• and a bit of flexbox, but I could'nt achieve the wanted result.

If you need more information, I would be more than welcome to give them. Thank you.

Answer 1

This should help you get started.

UPDATED

* {
  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>