css - 带有 3 列的粘性页眉/页脚。在列内滚动的 Div

Question

我这里有一个 JS Fiddle。

https://jsfiddle.net/h3c6jqfy/

基本上，我正在尝试制作一个具有粘性页眉和页脚的 UI。中间内容将包含三列。每列中都有 DIV。这些 DIV 应具有 100% 的高度，并且不应从页脚处截断。在 DIV 中，它们将具有可滚动的 div。

我创建的非常基本的布局中有这个...

d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!

说到这里就结束了!!永远不会达到。

Answer 1

您可以使用flexbox而不需要计算高度；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 75px;
  background: red;
}

main {
  flex: 1;
  background: lightgreen;
  display: flex;
}

.scrolly {
  flex: 1 0 33%;
  overflow-y: auto;
}

.content {
  height: 1000px;
}

footer {
  height: 50px;
  background: blue;
}

<header></header>
<main>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
</main>
<footer></footer>