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

Question

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

更新：我创建了一个小提琴，我认为这是我想要的。我的页眉和页脚保持不变。但是，我必须欺骗主div的顶部边距，以便它的内容在标题之后立即开始。实际上，我仍然唯一的问题是页脚在底部截断了内容的结尾。我需要查看全部内容。

小提琴：http://jsfiddle.net/fgskS/18/

谢谢！

Answer 1

简单地将连续元素的高度设置为等于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; }

小提琴：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

Answer 2

如果将页眉和页脚div设置为固定，则可以为内容创建一个主div，它将以所需的方式滚动。