html 设置页脚div一直在页面底部
2024-10-13 22:02:06
先上代码
<!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,是为了绝对定位,让其居于页面底部。
最新文章
- Javascript初学篇章_8(事件)
- [转]mac 10.9.4下配置apache
- python 写入csv文件
- Java 设计模式学习总结(下)
- python学习笔记17(动态类型)
- html-----018----HTML Web Server/HTML URL 字符编码
- Python Challenge
- Android的selector 背景选择器
- 查看 NDK 版本
- PHP——laravel之DB类->;查询
- Python02(Linux命令)
- Codeforces Round #555 (Div. 3)[1157]题解
- idea中配置Springboot热部署
- python多线程学习一
- leetcode647
- MVC身份验证及权限管理(转载)
- 解决Ubuntu17.04以上系统,yarn init报错
- jmeter常用组件
- JavaScript重点知识(一)
- android studio 3.0 集成ijkplayer