在两个固定 div 元素之间创建滚动 div

我对在网站中如何定位 div 不太熟悉，所以我希望有人可以在这里提供帮助。我想要得到的是一个三明治类型的设置，在两个 div 中间有一个滚动内容。这样我就有一个页眉 div 和一个页脚 div，它们都必须在页面上保持静态。然后，在它们之间，我必须有一个内容 div 来填充两个固定 div 之间的空间，并且能够自行滚动。我将如何构建这样简单的东西？还是这根本不简单？

更新：我创建了一个我认为几乎是我想要的小提琴。我让页眉和页脚在页面上保持静态。但是，我必须欺骗主 div 的上边距，以便其内容在标题之后立即开始。实际上，我仍然遇到的唯一问题是内容的末尾被页脚在底部切断。我需要查看全部内容。

Fiddle: http://jsfiddle.net/fgskS/18/

谢谢你！

只需将连续元素的高度设置为 100% 并将内容 DIV 设置为在 Y 轴上滚动即可：

<header>
    <h1>Sandwich Layout</h1>
</header>
<div id="main" role="main">

</div>
<footer>
    Footer stuff here
</footer>

html,
body { height: 100%; margin: 0; padding: 0; } /* This is important */

header,
footer { background: #ccc; height:20%; }

#main { height: 60%; overflow-y:scroll; }

Fiddle: http://jsfiddle.net/kboucher/3E8Gg/

2020 年更新：

HTML:

<header>
    <h1>Sandwich Layout</h1>
</header>
<div class="main" role="main">
  <div class="fake-height">Content here</div>
</div>
<footer>
    Footer stuff here
</footer>

CSS:

body,
html {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: #eee;
  padding: 1rem;
}

.main {
  flex: 1 0 auto;
  height: 0; // prevents flex box expanding out of view-height
  overflow-y: auto;
  padding: 1rem;

  .fake-height {
    height: 1000px;
  }
}

https://codepen.io/kboucher/pen/dyomxWN