CSS中的扩展中间层

Question

我该如何去设计一个有固定高度的页眉和页脚(附加在浏览器窗口的顶部和底部)但中间不断扩展的网站。滚动条将只用于中间部分(图中的橙色部分)，这样页面的其余部分就不需要滚动了。我在下面画了一个模型，以便更清楚地解释。

理想情况下，它需要完全用CSS和HTML实现(没有javascript的麻烦！)。这个问题我已经解决了很多，但是我不能强迫橙色部分在没有填满的时候填满剩余的空间(不管它是什么内容)，如果它溢出了就开始滚动。

​

​

Answer 1

我想这就是你想要的：

(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：

​

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;
}

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

​

注意语法:为了简单起见，我在这里使用了“原子”的flexbox CSS属性，但在野外，您更可能会遇到使用flex关键字本身的简写语法。可以在flex项( display:flex容器的子项)上设置的3个属性的默认值为：

作为速记的每个属性的

初始值: flex-grow: 0 flex-shrink: 1 flex-basis: auto

使用flex，有多种方法可以组合这些属性，指定一个、两个或三个值，这些值可以通过关键字、单位长度(2px)或无单位增长/收缩比率2进行组合。根据参数的不同，有许多不同的“重载”可用。

例如，flex-basis:50px可以是flex:50px、flex:0 1 50px，而flex-grow:1可以是flex 1;或flex:1 1 auto;。它仍然不像我能想到的其他CSS速记那样糟糕(position，我在看着你呢)。'flex' shorthand syntax MDN页面有更多详细信息。