粘性页眉，粘性页脚（可变高度），流畅的中间？答案

【问题标题】：Sticky header, sticky footer (variable height), fluid middle?粘性页眉，粘性页脚（可变高度），流畅的中间？
【发布时间】：2013-10-13 18:36:16
【问题描述】：

我正在尝试在 CSS 中组合一个简单的 3 行布局。它需要：

一个主容器 div（100% 宽度，100% 高度），它包含...
- 粘性标题（固定高度为 48 像素）
- 填充页眉和页脚之间所有剩余空间的中间部分
- 粘性页脚（初始高度为 62 像素，但可以在通过 javascript 加载页面后更改）

这是我目前所得到的：

HTML

<body>
    <div id="container">
        <div id="headContainer">
            ...
        </div>
        <div id="bodyContainer">
            Stuff goes here
        </div>
        <div id="footContainer">
            ...
        </div>
    </div>
 </body>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    background-color:#2c3e50;
}

div#container {
    height:100%;
    width:100%;
}

div#headContainer {
    background-color:#e74c3c;
    height:48px;
    width:100%;
    z-index:1;
}

div#bodyContainer {
    overflow:auto;
    width:100%;
    top:48px;
    position:absolute;
    background-color:#FFFFFF;
}

div#footContainer {
    background-color:#c0392b;
    width:100%;
    position:absolute;
    bottom:0;
    padding:11px 18px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

http://jsfiddle.net/MsKaj/2/

我正在努力弄清楚如何让“bodyContainer”填充页眉和页脚之间的可用空间。如果页脚是固定大小的，这会容易得多！

有什么建议吗？

【问题讨论】：

您是否想要一个粘性页脚，因为它会停留在屏幕底部而不随页面滚动？
是的。所有内容都将在 bodyContainer 中，它应该是可滚动的。页眉和页脚应分别保留在页面的顶部和底部。
@Coop 我有这个问题！！怎么做才能让它随着卷轴移动呢？谢谢
How do I use CSS to position a fixed variable height header and a scrollable content box?的可能重复
这是关于 SO 的一个非常常见的问题。实际上，您搜索 Google 并在结果中挑选出 SO 问题会得到更好的结果。

标签： html css

【解决方案1】：

放：

height: 100%;

在 div#bodyContainer 上

另外，考虑应用 position: fixed;到页眉和页脚，并将它们分别固定到屏幕顶部和屏幕底部...

【讨论】：

谢谢帕特。向 bodyContainer 添加 100% 的高度会将其推到页脚下方，因为我给它的顶部偏移量使其位于页眉下方。我现在就搞定固定位置。
只需为您的内容添加一个与置顶页脚高度相同的 margin-bottom 。 . .
页脚的高度是动态的。它可以在通过 jQuery 加载页面后更改。当它变得更高时，我需要它来挤压 bodyContainer。
如果页脚高度在页面加载时动态变化，只需将动态高度同时应用到主要内容的下边距即可。 . .
它不会在页面加载时改变，但之后可能会改变。我知道如果页脚高度发生变化，我可以使用 javascript 设置 bodyContainer 的底部位置以匹配页脚的高度 - 但我希望有一个基于 CSS 的解决方案。

【解决方案2】：

你可以这样（固定页眉和页脚）

HTML：

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

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.header, .footer {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    background: lightgreen;
}
.header {
    top: 0;
}
.footer {
    height: 62px;
    bottom: 0px;
}
.content {
    min-height: 100%;
    background: lightblue;
    padding: 48px 0 62px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

还有一个DEMO。

【讨论】：

谢谢！在此示例中，我们假设页脚是固定大小，但事实并非如此。我需要“内容”div 来使用页眉和页脚之间的所有可用空间，无论页脚可能是什么大小。
你是用JS来改变内容，你不能用同样的功能改变页脚大小和填充吗？？
我能做到。这可能是我现在要采取的路线，但我希望有一个基于 CSS 的解决方案！
基于条件，我认为仅使用 CSS 是不可能的。
@LinkinTED：是的，只有 CSS 是可能的，它是 very simple。

【解决方案3】：

这里的所有其他解决方案都已过时，要么求助于 JavaScript，要么不支持可变高度的页脚。

随着CSS flex model 的出现，解决可变高度的粘页脚问题变得非常非常容易：虽然主要以水平方向布局内容而闻名，但 Flexbox 实际上也适用于垂直布局问题。您所要做的就是将垂直部分包裹在一个弹性容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

请注意标记和 CSS 的简单程度。没有桌子黑客或任何东西。

flex 模型是supported by all major browsers 以及据称是 IE11+，尽管我的 IE 还没有正确呈现这个 sn-p。

html, body {
  height: 100%;
}

#headContainer {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#bodyContainer {
  flex: 1;
  border: 1px solid orange;
}

#footContainer {
  background: lime;
}

<div id="wrapper">
  <div id="headContainer">Title</div>
  <div id="bodyContainer">Stuff goes here</div>
  <div id="footContainer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

【讨论】：