html 设置页脚div一直在页面底部

先上代码

复制代码
<!DOCTYPE HTML>
<html lang="en" style="height: 100%; width: 100%;">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo"  style="position: absolute; width: 100%; min-height: 100%; height: auto;">
        <div class="page-header navbar navbar-fixed-top">
            //这部分的div的 position 是 fixed </div>
        <div style="position: absolute; min-height: 100%; height: auto; width: 100%; text-align: center;">
            <div class="page-container" style="position: relative; margin-bottom: 30px;"></div>
             <div class="page-footer" style="position: absolute; bottom: 0px; display: block; width: 100%;"></div>
        </div>
    </body>
</html>
复制代码

 

解析：

1、先设置<html>的 height 为 100%；

2、设置 body 的position 为 absolute，因为它里面的 div 有一个为 fixed，这样可以使得 body 的范围可以包括该div，如果设置为 relatve，则不包括该div。再设置 min-height 为 100%，使其最小高度也为 html 的 height；

3、让内容 div 和页脚 div 都包含在同一个外部 div 中，这样页脚在窗口缩小时不会上浮到内容 div 的位置。

4、外部 div 的 position 设置为 absolute，是由于 body 也为 absolute 的缘故，并设置其 min-height 为 100%，这样可以使其高度最小为 body 的高度，height 为 auto，则使其可以任意改变。

5、页脚 div 的 position 设置为 absolute，bottom 为 0，是为了绝对定位，让其居于页面底部。

posted @   林锅  阅读(8260)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示