个人中心
gpt4 book ai didi

html - 页脚占用剩余窗口高度的其余部分，但至少有指定数量的 px

转载 作者：太空宇宙 更新时间：2023-11-04 13:21:47 26 4
gpt4 key购买 nike

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

假设我有这个 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。

最佳答案

BG-颜色溶液

如果您只想让剩余空间具有与页脚(但不是正文)相同的背景颜色，您可以将页脚 bg-color 添加到 html 标签中:

html {
    background-color: #footer_color;
}

body {
    background-color: #body_color;
}

#footer {
    min-height: 80px;
}

.

JS 解决方案

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

这里有一个代码示例的类似问题:https://stackoverflow.com/a/14329340/3589841

.

Flexbox-解决方案

如果你只关心最新的浏览器，你可以使用 flexbox-box-model:

HTML:

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

CSS:

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

关于html - 页脚占用剩余窗口高度的其余部分，但至少有指定数量的 px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24026471/

26 4 0
文章推荐： html - 试图将一个 div 标签置于一个 section 标签的中心
文章推荐： Python - 读取 .b4u 文件 - 找到错误序列项 0 : expected str instance, 字节
文章推荐： c++ - OnShow 事件上的 ProcessMessages c++ builder
文章推荐： java - 使用 couchbase-spark-connector 时出错。抛出 BackPressureException
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com