Question

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

主要容器div（100％宽度，100％高度），...
- 一个粘性标题（固定高度为48px）
- 填充页眉和页脚之间所有剩余空间的中间部分
- 粘性页脚（初始高度为62px，但可以通过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'填充页眉和页脚之间的可用空间。如果页脚是固定大小，这将更容易！

任何提示？

Answer 1

此处的所有其他解决方案都已过时，要么使用JavaScript，要么不支持可变高度的页脚。

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

注意标记和CSS有多简单。没有桌子或任何东西。

flex模型是supported by all major browsers以及涉嫌IE11 +，虽然我的IE还没有正确呈现这个片段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

把：

height: 100%;

在div＃bodyContainer

上

另外，考虑申请职位：固定;到页眉和页脚并将它们分别固定在屏幕顶部和屏幕底部......

Answer 3

你可以像这样（使用固定的页眉和页脚）

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。

粘性标题，粘性页脚（可变高度），流体中间？

3 个答案: