页面footer在底部
2024-08-29 23:29:17
页脚动态贴在底部需要满足以下两个条件:
- 当主体的内容高度不超过可视区域高度的时候,页脚贴在页面底部。
- 当主体的内容高度超过可视区域高度的时候,页脚将按正常布局。
方法一:footer高度固定+绝对定位
<body>
<header>header</header>
<main>content</main>
<footer>footer</footer>
</body>
html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}
footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}
方法二:footer高度固定+margin负值
<body>
<div class="container">
<header>header</header>
<main>main content</main>
</div>
<footer>footer</footer>
</body>
html,body{height:100%;margin:0;padding:0;}
.container{min-height:100%;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}
方法三:css table实现的圣杯布局
<div class="wrapper">
<div class="header">头部</div>
<div class="main">
<div class="box sidebar">左侧栏</div>
<div class="box content">主体内容</div>
<div class="box sidebar">有侧栏</div>
</div>
<div class="footer">页脚底部</div>
</div>body {
background: @beige;
color: black;
}
.wrapper {
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header {
display: table-row;
height: 1px;
background: @yellow;
}
.main {
height: 100%;
display: table;
width: 100%;
}
.box {
display: table-cell;
}
.sidebar {
width: 100px;
background: @orange;
}
.footer {
display: table-row;
height:1px;
background: @green;
color: @beige;
}
@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;
最新文章
- 安装 pyopenssl c/_cffi_backend.c:15:17: 致命错误:ffi.h:
- js~~给网站图片添加水印~~~
- 桔子浏览器|1M安装包|hao123专属浏览器
- CentOS怎样强制卸载PHP以及自定义安装PHP
- POJ 3905 Perfect Election
- linux性能之iostat
- 如何用Django从零开始搭建一个网站(0)
- python+selenium 自动化测试实战
- H5播放器内置播放视频(兼容绝大多数安卓和ios)
- Go语言远程执行ssh命令简单封装(支持带交互命令)
- 模块math和cmath
- GridView动态添加列并判断绑定数据DataTable的列类型控制展示内容
- COM组件服务访问权限
- 一个检测网页是否有日常链接的python脚本
- 使用ArcGIS Chef Cookbook轻松搞掂WebGIS平台部署
- 2015年IPC网络摄像机技术发展现状分析
- Linux ./configure --prefix 命令是什么意思?
- Maximum Subarray解题报告zz
- ecshop跨站漏洞详情及修补网站漏洞
- textbox获取当前光标位置,在光标后面插入字符串
热门文章
- 填坑...P1546 最短网络 Agri-Net
- [Ynoi2015]即便看不到未来
- 利用python暴力破解压缩文件密码
- Ali-Tomcat在eclipse多开的解决方法
- 洛谷 P2764 LibreOJ 6002 最小路径覆盖问题
- hdu 1598 暴力+并查集
- Ada boost学习
- [Javascript Crocks] Safely Access Object Properties with `prop`
- UVa 10465 Homer Simpson(DP 全然背包)
- 【STL容器学习】-关联容器与map的用法