html+css底部自动固定底部
2024-08-24 04:11:09
前端在切图过程中,肯定遇见过这种情况。
页面结构由三个部分组成,头部、内容、底部。
当一个页面的内容没撑满屏幕时,底部是跟着内容而并列存在的。
这个时候如果是大屏的话,底部下面会有多余的空白区域,而网页设计需求必须要底部贴近浏览器底部。
固定定位,绝度定位都不好使。
废话不多说,直接上代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{padding:0;margin:0;}
html{height:100%;}
body{min-height:100%;}
body{position:relative;}
.footer{
height:100px;
background:red;
width:100%;
position:absolute;
bottom:0;
left:0;
}
.box{
padding-bottom:130px;
}
.box p{
line-height:30px;
text-align:center;
border:solid 1px green;
}
</style>
</head>
<body>
<div class="box">
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
</div>
<div class="footer"></div>
</body>
</html>
最新文章
- 关系数据库SQL之可编程性触发器
- 一键删除.svn文件bat脚本
- 【caffe】epoch,[batch_size],iteration的含义
- java map的四种遍历
- transform应用详解
- 关于Form.Close跟Form.Dispose
- [转]Web.config配置文件详解(新手必看)
- iOS后台如何保持socket长连接和数据传输
- 百度语音识别REST API——通过使用Http网络请求方式获得语音识别功能
- WPF TreeView递归遍历相关方法
- 禁止选择文本和禁用右键 v2.0
- 基于ViewPager的一些酷炫切换效果
- C#.NET学习笔记7--11---算术运算符,变量赋值,变量的交换,布尔表达式1,布尔表达式2
- HTML和CSS前端教程03-CSS文本样式
- .net反编译的九款神器(转载)
- Git合并指定文件到另一个分支
- JS apply的巧妙用法以及扩展到Object.defineProperty的使用
- Python生成器(generator)和迭代器(Iterator)
- [django]Django model中数据批量导入bulk_create()
- Java 集合:List(ArrayList,LinkedList)