CSS中的扩展中间层

Question

我如何设计一个具有固定高度页眉和页脚（连接到浏览器窗口的顶部和底部）但扩展中间的网站。滚动条仅适用于中间（图中的橙色部分），因此页面的其余部分永远不需要滚动。我在下面画了一个模型来更清楚地解释。

理想情况下，它需要完全用CSS和HTML实现（没有javascript小提琴！）。我已经解决了这个问题，但我不能强制橙色部分填满剩余的空间（如果它没有内容），如果它溢出则开始滚动。

Answer 1

我认为这就是你想要的：

Live Demo（edit）

<强> HTML：

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

<强> CSS：

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}

Answer 2

它被称为StickyFooter或“页脚推送”方法。它遍布整个网络，但这是我发现的最佳选择：

http://ryanfait.com/sticky-footer/

Answer 3

一个古老的问题，但flexbox给了我们一个超级简单的方法来实现这种模式，一个熟悉的variation关于圣杯＆＃39;布局：

＆＃13;

＆＃13;

body {
  /*set container to vertical (column) flex mode, ensure body is full height*/
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  /*more or less equivalent to min-height:50px*/
  flex-basis:50px
}
header {
  background-color: #7AEE2D;
}
main {
  background-color: #EBAE30;
  /*tell main section to expand to fill available space, this is same as flex 1; or flex:1 1 auto;*/
  flex-grow:1;
}
footer {
  background-color: #34A4E7;
}

＆＃13;

<header>header</header>
<main>main</main>
<footer>footer</footer>

＆＃13;

＆＃13;

＆＃13;

关于语法的说明：我使用了＆＃34; atomic＆＃34;这里的flexbox CSS属性为了简单起见，但在野外，您更有可能使用flex关键字本身运行速记语法。您可以在弹性项目（display:flex容器的子级）上设置的3个属性的默认值为：

  

作为速记的每个属性的初始值：flex-grow：0   flex-shrink：1 flex-basis：auto

使用flex，有多种方法可以组合这些属性，指定一个，两个或三个值，这些值可以通过关键字，单位长度（2px）或无单位增长/缩小比率2。许多不同的＆＃34;重载＆＃34;是可用的，取决于你的论点。

例如，flex-basis:50px可能已flex:50px，flex:0 1 50px，而flex-grow:1可能是flex 1;或flex:1 1 auto;。它仍然没有我能想到的其他一些CSS短缺那么糟糕（position，我正在看着你）。 'flex' shorthand syntax MDN页面包含更多详细信息。