Html 粘性页眉、粘性页脚（可变高度）、流体中间？_Html_Css

Html 粘性页眉、粘性页脚（可变高度）、流体中间？

html css

Html 粘性页眉、粘性页脚（可变高度）、流体中间？,html,css,Html,Css,我试图在CSS中创建一个简单的3行布局。它需要：一个主容器分区（100%宽，100%高），用于容纳。。。粘性收割台（固定高度为48px）填充页眉和页脚之间所有剩余空间的中间部分粘性页脚（初始高度为62px，但在通过javascript加载页面后可以更改）以下是到目前为止我得到的信息： HTML <body> <div id="container"> <div id="headContainer">

我试图在CSS中创建一个简单的3行布局。它需要：

一个主容器分区（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>

我正在努力找出如何让“bodyContainer”填充页眉和页脚之间的可用空间。如果页脚是一个固定的大小，这将是容易得多

有什么建议吗？

放：

height: 100%;

在div#bodyContainer上

也可考虑应用位置：固定；将页眉和页脚分别固定在屏幕顶部和底部…

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

HTML:

还有一个问题。

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

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

注意标记和CSS是多么简单。没有桌子上的乱七八糟的东西

flex模型和据称的IE11+一样好，尽管我的IE还没有正确呈现这个片段

html，正文{
身高：100%；
}
#头套{
背景：黄色；
高度：100px；/*也可以是可变的*/
}
#包装纸{
显示：flex；/*使用flex模型*/
最小高度：100%；
灵活方向：列；/*了解更多信息：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#集装箱{
弹性：1；
边框：1px实心橙色；
}
#集装箱{
背景：石灰；
}


标题
这里有东西
页脚

属于

变量

高度

您是否希望粘性页脚停留在屏幕底部而不随页面滚动？是的。所有内容都将在bodyContainer中，应该可以滚动。页眉和页脚应该分别保留在页面的顶部和底部。@Coop我有这个问题！！怎么办让它随着卷轴移动？这是一个非常常见的问题。事实上，你在谷歌上搜索得到了更好的结果，并在结果中挑出了一些问题。谢谢帕特。向bodyContainer添加100%的高度会将其推到页脚下方，因为我给它的顶部偏移量使其位于页眉下方。我现在要搞乱固定的位置。只需在内容底部添加一个与粘性页脚高度相同的边距。页脚的高度是动态的。它可以在页面加载后通过jQuery进行更改。如果页脚高度在页面加载时动态变化，只需将动态高度同时应用于主要内容的底部边距。它不会在页面加载时更改，但可能会在加载后更改。我知道如果页脚高度发生变化，我可以使用javascript设置bodyContainer的底部位置以匹配页脚的高度，但我希望有一个基于CSS的解决方案。谢谢！在本例中，我们假设页脚的大小是固定的，而事实并非如此。我需要'content'div来使用页眉和页脚之间的所有可用空间，不管页脚的大小。您正在使用JS来更改内容，您不能用相同的函数更改页脚大小和填充吗？我可以这样做。这可能是我现在要走的路线，但我希望有一个基于CSS的解决方案！基于这些条件，我认为这仅用CSS是不可能的。@LinkinTED:是的，这仅用CSS是可能的，这是不可能的。

height: 100%;

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

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