CSS 中的扩展中间答案

【问题标题】：An expanding middle in CSSCSS 中的扩展中间
【发布时间】：2011-07-01 10:45:54
【问题描述】：

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

理想情况下，它需要完全用 CSS 和 HTML 实现（没有 javascript fiddles！）。我已经解决了这个问题，但我不能强制橙色部分在未满时填充剩余空间（无论它是什么内容）并在溢出时开始滚动。

【问题讨论】：

Like this?
我不确定粘性页脚是否是您想要的，这就是为什么我将它作为评论发布并带有问号。关于您的问题，我不明白的是，“最小高度”和“最大高度”图像似乎与您的文本“固定高度页眉和页脚（附加到浏览器窗口的顶部和底部）不一致）但是一个扩大的中间”。图像中的外部红色边框不是视口，而是整个页面？
对不起。红色边框代表整个视口（忽略宽度）。页脚和页眉保持相同的高度。只有橙色位会改变高度（因此有自己的滚动条），因为它可以包含任意数量的内容。
我在您的最后一条评论之前开始写我的答案。现在我做对了，我很受鼓舞，希望！
正确。非常感谢您的帮助。

【解决方案1】：

一个老问题，但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 关键字本身的速记语法。您可以在弹性项目（display:flex 容器的子项）上设置的 3 个属性的默认值是：

作为每个属性的初始值的简写：flex-grow: 0 弹性收缩：1 弹性基础：自动

使用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 页面有更多详细信息。

【讨论】：

【解决方案2】：

我认为这就是你想要的：

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
}

【讨论】：

仅供参考当您在 Android 浏览器上运行此程序时，您无法滚动 #content。有人可以在 iPhone/Ipad 上测试吗？
不幸的是，我没有安卓设备来测试这个。不过，如果不支持overflow-y: auto..，那就有点奇怪了
不错的答案。如果我可以对大文本提出建议：使用 Lorem Ipsum:es.lipsum.com 这对我的眼睛伤害较小:-)

【解决方案3】：

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

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

【讨论】：

这不是我的想法。粘性页脚的问题是整个浏览器屏幕滚动。我希望能够使用自己的滚动条（如橙色隔间）使各个隔间自行滚动。这可能看起来没什么区别，但它对我的想法很重要。
当然可以理解。但是，我要提醒您，可用性测试后的可用性测试确认网站中的滚动 div（或框）会导致用户感到沮丧。它们很难导航，内容可能会丢失，并且是可访问性的彻底失败。我正在撤消我继承的站点上的集合。信不信由你，更好的解决方案可能是考虑使用网格（如数据表）或什至为您各自的平台使用服务器端分页脚本来“分页”内容。这里有一些证据：usability.gov/pdfs/chapter8.pdf