html铺满页脚的四种方式

< > 内容 页面 br> 方式 html height 0 min 编程技术
发布日期 2022-08-31 更新日期 2022-08-31 阅读次数 55 文章字数 2.6k

万能的js实现，只要把内容分成2部分，就可以了，先计算页脚的大小，然后使用可视大小，减去页脚大小，作为主体部分的 min-height。

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="content">
    <h1 style="margin:0px;">Hello，Bootstrap3！</h1>

    </div>
    <div id="footer">
        <p style="text-align:center;margin:0px;">copyright &copy; zhufenghua 2022</p>
    </div>

    <script>
        $(function() {
            const height = $("hua_footer").height();
            $("hua_content").css("min-height", (document.documentElement.clientHeight - height) + 'px');
        })
    </script>
</body>

</html>

使用js的方案，唯一的缺点，就是会“闪烁一下”，主要是因为在页面加载完成后，再进行重新渲染。。。

第二种方案：min-height：100vh ，直接把内容部分，最小为100%vh，再往下滑动，就是页脚啦。

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div style="min-height: 100vh;overflow: hidden;">
        主体
    </div>
    <div>
        页脚
    </div>
</body>

</html>

这种方式，唯一不好的，就是总是超过100%高度。

第三种方式，绝对定位：

<!doctype html>
<html>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>

<footer class="footer">
    页脚内容
</footer>



<style>
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
        /* Margin bottom by footer height */
    }

    .footer {
        position: absolute;
        bottom: 0;
        height: 60px;
        /* Set the fixed height of the footer here */
        background-color: hua_f5f5f5;
    }
</style>
<html>

这种方式，优缺点也很明显，就是页脚大小必须固定。

第四种方式：translateY(100%)

<!doctype html>
<html>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
页面内容<br>
最后一行

<footer class="footer">
    页脚内容
</footer>



<style>
    html {
        position: relative;
        min-height: 100%;
    }

    .footer {
        position: absolute;
        bottom: 0;
        background-color: hua_f5f5f5;
        transform: translateY(100%);
    }
</style>
<html>

这种方式，和第二种差不多，总是比100%要高一些。

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-29.html

版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。

< > 内容 页面 br> 方式 html height 0 min

发表评论

相关推荐
朱丰华   |   1年前   |   checkbox

checkbox默认传值问题

389    评论    点赞
朱丰华   |   1年前   |   页面 · 监听

iframe子父页面信息传递与监听

375    评论    点赞
朱丰华   |   1年前   |   linux

linux保持后台进程不被关闭nohup &

254    评论    点赞
朱丰华   |   1年前   |   sql · mysql

mysql Timestamp或dateTime格式筛选

126    评论    点赞
朱丰华   |   1年前   |   javascript

通过Javascript获得页面元素的字体大小

135    评论    点赞
朱丰华   |   1年前   |   请求 · 一个

ab测压命令，apache测压工具

172    评论    点赞
朱丰华   |   1年前   |   < · iframe

让iframe嵌入的视频自适应 （100%宽度）？

122    评论    点赞
朱丰华   |   1年前   |   js · 重复

js如何避免重复监听addEventListener事件？

124    评论    点赞
朱丰华   |   1年前   |   正则 · 表达

正则表达式，实现if...then...else

113    评论    点赞
朱丰华   |   1年前   |   变量 · mysql · sql · 用户

MySQL用户自定义变量

95    评论    点赞
朱丰华   |   1年前   |   sed · 文件

Shell 指定行处理head、tail、sed

156    评论    点赞
朱丰华   |   1年前   |   linux · 内容

linux环境下，对于一个大文件，如何查看其中某行的内容

69    评论    点赞
朱丰华   |   1年前   |   php · 字符 · 字符串

如何在 PHP 中将字符串的第一个字母转换为大写

150    评论    点赞
朱丰华   |   1年前   |   php · 字符 · 正则

php正则表达式原生字符

86    评论    点赞
朱丰华   |   1年前   |   html · <

html浏览器当前tab标签切换时触发监听

106    评论    点赞
朱丰华   |   1年前   |   javascript · 滚动 · html

Javascript 显示当前滚动条滚动的百分比

74    评论    点赞
朱丰华   |   1年前   |   html · id · <

html同一个页面有两个相同id ，如何用id选择器选中

109    评论    点赞
朱丰华   |   1年前   |   文件 · linux · 修改

linux文件的三个时间atime,mtime,ctime分别表示什么？

275    评论    点赞
朱丰华   |   1年前   |   linux · 文件

linux递归统计文件夹大小、du命令_Linux du命令：查看文件夹和文件的磁盘占用情况

193    评论    点赞
朱丰华   |   1年前   |   git · add · 文件

git add -A 和 git add . 的区别

113    评论    点赞
{{item.author_name}}   |   {{new Date(item.date*1000).log()}}   |   {{it}} ·

{{item.title}}

{{item.uv}}    评论    点赞