sticky footer设计

来源：互联网发布：js 中文简体繁体转换编辑：程序博客网时间：2024/06/05 09:30

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;font-size: 48px;}/*第一步设置盒子为满屏大小*/.box {position: fixed;width: 100%;height: 100%;top: 0;left: 0;overflow: auto;background: green;}/*第二步子盒子设置最小高度且清除浮动，给一个padding-bottom等于footer避免内容被footer遮盖*/.main {width: 100%;min-height: 100%;padding-bottom: 100px;}.content {background: orange;}/*第三步footer的高度和margin-top要相等*/.footer {position: relative;width: 100%;height: 100px;background: #f3f3f3;margin: -100px auto 0 auto;clear: both;text-align: center;line-height: 100px;}.clearfix {display: inline-block;}.clearfix::after {content: ".";display: block;height: 0;line-height: 0;visibility: hidden;clear: both;}</style></head><body><div class="box"><div class="main clearfix"><div class="content"><p>这是 一段话</p><p>这是 一段话</p><p>这是 一段话</p></div></div><div class="footer"></div></div></body></html>

阅读全文

0 0