头部尾部始终处于两端（适用于pc端和移动端）
2024-08-29 18:27:18
此代码展示的效果阐述：（随着屏幕宽高度的变化而变化）
当页面内容小于屏幕高度时，头尾分别处在屏幕顶部和屏幕底部；
当页面出现滚动条时，头尾分别处于屏幕顶部和内容底部；
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%; 这一步很关键
}
.container{
min-height: 100%; 这一步也很关键
position: relative;
}
.box{
width:100%;
height: 500px;
background: blue;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height:100px;
background: #64A131;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div id="footer">
footer
</div>
</div>
</body>
最新文章
- 初试Code First（附Demo）
- JUnit备忘录
- jquery中html()、text()、val()的区别与使用
- magento后台登陆被锁定 索引报错的解决：General error: 1205 Lock wait timeout
- Test Spring el with ExpressionParser
- BZOJ4033 T1
- RESTful风格的Web服务框架:Swagger
- C语言编程小tip
- 解决win7中防火墙的0x6D9问题的方法
- Scrapy-redis<数据库篇>
- iOS 12.1 跳转页面时 tabBar闪动
- PowerShell-自定义函数(五)-参数互斥:ParameterSetName
- 'weinre' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方案
- IntelliJ IDEA生成live template（代码模板）
- 了解PHP中$_SERVER变量对路径的解析
- LoadRunner测试流程
- 两个应用之间传递广播的规则 Broadcast
- Hibernate-基础入门案例，增删改查
- MVC controller的Action获取HttpRequest
- python开发_os.path