footer置底时页面溢出浏览器高度的原因:为什么html和body以及div#wrapper都是1034*1020,html却占据了整个视窗?

花韻仙語
发布: 2024-11-08 10:00:14
原创
644人浏览过

footer置底时页面溢出浏览器高度的原因:为什么html和body以及div#wrapper都是1034*1020,html却占据了整个视窗?

footer置底时页面溢出浏览器高度的原因

问题:

  • 设备信息和错误图片
  • 为什么html和body以及div#wrapper都是1034*1020,html却占据了整个视窗?

答案:

第一个原因:浏览器默认样式

浏览器的部分元素带有默认样式,导致页面高度超过窗口高度。清除这些默认样式即可。

立即学习前端免费学习笔记(深入)”;

一览运营宝
一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具,由深耕视频行业18年的一览科技研发推出。

一览运营宝 41
查看详情 一览运营宝
* {
    margin: 0;
    padding: 0;
}
登录后复制

第二个原因:文档流

默认情况下,文档流中的元素会自动撑开父容器的高度。当将元素的margin-bottom设置为负值时,该元素会超出其布局边界,不再影响父容器的高度计算。

这种技术被称为“块级格式化上下文”(BFC)。当一个元素触发BFC时,它会创建一个独立的渲染环境,并遵循特定规则进行布局。

如果 footer 的 margin-bottom 设置为负数,它可能会重叠或覆盖页面上其他内容。因此,需要使用一个占位元素来代替footer占用的空间。

以上就是footer置底时页面溢出浏览器高度的原因:为什么html和body以及div#wrapper都是1034*1020,html却占据了整个视窗?的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号