Making fixed div expand between elements

Question

I have a div that should be between two elements: A header and a footer. This div is a side menu and it needs to be fixed with 100% height that way however the user scrolls, it will always follow them. However, I cannot get the menu to be between the header and footer. It will go on top of the footer and header. I don't want to use z-index: 0, because the side menu will contain items. I need it to start at the end of the header and beginning of the footer. Also, I chose static heights here, but the real world example has auto heights for footer and header. Here's how it looks like now: https://jsfiddle.net/kt29L1ef/

body {
  margin: 0;
}

.header {
  width: 100%;
  height: 250px;
  background-color: red;
}

.menu {
  height: 100%;
  width: 70px;
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  background-color: #222;
  overflow-x: hidden;
  box-shadow: 0.2rem 1px 5px 0 rgba(0, 0, 0, 0.3);
}

.footer {
  width: 100%;
  height: 250px;
  background-color: blue;
}

<div class="header">


</div>
<div class="menu">

</div>

<div class="footer">

</div>

Answer 1

I found this question rather intriguing. The cool, weird thing about a fixed position element is how it behaves when you don't specify a positioning property (top, bottom, etc.). It remains statically positioned (but fixed to that position), which happens to be just where we want it. Using that knowledge, and adding some flexbox into the mix, I think I achieved what you're looking for. Since I couldn't explicitly extend the height of thte fixed menu, I used its full height parent container to house the background color, making it appear as if it belongs to the menu.

Demo notes:

• View in 'Full page' mode (or in the jsFiddle)
• I made the .header and .footer short, but their height is irrelevant. The main element will always consume the most available space

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  width: 100%;
  height: 50px;
  background-color: red;
}

main {
  flex-grow: 1;
  display: flex;
}

.fixed {
  padding-left: .75em;
  flex: 2.8;
  background-color: #222;
  box-shadow: 0.2rem 1px 5px 0 rgba(0, 0, 0, 0.3);
}

.content {
  flex: 10;
  padding-left: 1.3em;
}

.menu {
  color: white;
  position: fixed;
  z-index: 0;
  overflow-x: hidden;
}

.footer {
  width: 100%;
  height: 50px;
  background-color: blue;
}

<div class="container">
  <div class="header"></div>
  
  <main>
    <div class="fixed">
      <div class="menu">
        <h2>Menu</h2>
        <nav>
          <ul>
            <li>one</li>
            <li>two</li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="content">
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span></p>
      <p><span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
        <span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
        <span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
        <span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
        <span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
        <span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
        <span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
        <span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
    </div>
  </main>

  <div class="footer"></div>
</div>

jsFiddle