Html 页脚，占剩余窗口高度的剩余部分，但至少占指定的px_Html_Css_Height

Html 页脚，占剩余窗口高度的剩余部分，但至少占指定的px

html css

Html 页脚，占剩余窗口高度的剩余部分，但至少占指定的px,html,css,height,Html,Css,Height,我发现了几个问题，但他们的解决方案都不适合我，所以我们再来一次假设我有这个HTML模板 <html> <div id="header">...</div> <div id="contentA">...</div> <div id="contentB">...</div> <div id="footer">...</div> </html> ... ...

我发现了几个问题，但他们的解决方案都不适合我，所以我们再来一次

假设我有这个HTML模板

<html>
  <div id="header">...</div>
  <div id="contentA">...</div>
  <div id="contentB">...</div>
  <div id="footer">...</div>
</html>


...
...
...
...

页脚div的高度至少应为80px，但如果这些80px加上所有其他3个div的高度不足以填满屏幕，我希望页脚的增加量与页眉、contentA和contentB下方的屏幕填充量一样多。

我相信您会选择类似的内容，请看一看

使用CSS，我们创建了一个类，在本例中为fullheight，并应用以下内容：

.fullheight {
    display: block;
    position: relative;
    background: red;
    height: 100%;
}

然后我们还将以下内容应用于html，body

html, body {
    height: 100%;
    min-height: 100%;
}

BG颜色解决方案

如果您只想让剩余空间与页脚（而不是正文）具有相同的背景颜色，可以将页脚bg颜色添加到html标记中：

html {
    background-color: #footer_color;
}

body {
    background-color: #body_color;
}

#footer {
    min-height: 80px;
}

JS解决方案

如果页脚中有更复杂的内容，可以使用javascript/jquery计算剩余空间并将页脚设置为该高度

这里有一个与代码示例类似的问题：

Flexbox解决方案

如果您只关心最新的浏览器，则可以使用flexbox型号：

HTML:

不，那不行。它总是会根据需要更多地扩展页脚：/因为我不喜欢使用JS来处理类似的事情，并且为出于安全原因而不使用JS的客户添加了一些额外的规则-这对我来说是不可能的。flex解决方案看起来很棒-期待在不久的将来使用它。只要停留在后台解决方案，这是一个简单、快捷、有用的解决方案。非常感谢您的分享：）很高兴我能帮忙。请你把它标为正确答案好吗

<html>
<body>
    <div id="flex_container">
        <div id="header">...</div>
        <div id="contentA">...</div>
        <div id="contentB">...</div>
        <div id="footer">...</div>
    </div>
</body>
</html>

html, body {
    min-height: 100%;
}

#flex_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

#header {
    flex: 0 1 auto;
}

#contentA {
    flex: 0 1 auto;
}

#contentB {
    flex: 0 1 auto;
}

#footer {
    flex: 0 1 100%;
    min-height: 80px;
}