html - 粘性页眉，粘性页脚(可变高度)，流动的中间？-6ren

html - 粘性页眉，粘性页脚(可变高度)，流动的中间？

转载作者：太空宇宙更新时间：2023-11-04 13:30:09

我正在尝试在 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”填充页眉和页脚之间的可用空间。如果页脚是固定大小，这会容易得多!

有什么建议吗？

最佳答案

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

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

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

flex 模型是supported by all major browsers以及据称的 IE11+，尽管我的 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>

关于html - 粘性页眉，粘性页脚(可变高度)，流动的中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19220582/

文章推荐： javascript - 如果存在 2 个子 div，隐藏父 div？

文章推荐： C++11 和链接到 libstdc++ 的静态库

文章推荐： c++ - 查找目录路径

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 粘性页眉，粘性页脚(可变高度)，流动的中间？