使固定div在元素之间扩展

Question

我有一个div，它应位于两个元素之间：页眉和页脚。该div是侧面菜单，需要以100％的高度固定，但是用户滚动时，它将始终跟随它们。但是，我无法使菜单位于页眉和页脚之间。它将放在页脚和页眉的顶部。我不想使用z-index：0，因为侧面菜单将包含项目。我需要它从页眉的结尾和页脚的开头开始。另外，我在这里选择了静态高度，但实际示例中的页脚和页眉具有自动高度。现在的样子：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

我发现这个问题很有趣。关于fixed位置元素的最酷而怪异的事情是，当您未指定定位属性（top，bottom等）时，它的行为如何。它保持静态定位（但固定在该位置），恰好在我们想要的位置。利用这些知识，并在组合中添加一些flexbox，我想我达到了您的期望。由于无法明确扩展fixed菜单的高度，因此我使用了其全高父容器来容纳背景色，使其看起来好像属于菜单。

演示笔记：

• 以“整页”模式（或在jsFiddle中查看）
• 我将.header和.footer缩短了，但它们的高度无关紧要。 main元素将始终占用最多可用空间

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