3

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

  • 一个主容器 div（100% 宽度，100% 高度），它包含...
    • 粘性标题（固定高度为 48px）
    • 填充页眉和页脚之间所有剩余空间的中间部分
    • 粘性页脚（初始高度为 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”填充页眉和页脚之间的可用空间。如果页脚是固定大小的，这会容易得多！

有小费吗？

4

3 回答 3

1

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

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

请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。

所有主要浏览器以及据称 IE11+ 都支持flex 模型，尽管我的 IE 尚未正确呈现此代码段。

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>

于 2014-10-25T00:22:04.260 回答
-2

放：

height: 100%;

在 div#bodyContainer 上

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

于 2013-10-07T08:58:56.417 回答
-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。

于 2013-10-07T09:11:09.383 回答