HTML+CSS底部footer两种固定方式

  • A+
所属分类:网页技术

网页常见的底部栏(footer)目前有两种:

一、永久固定,不管页面的内容有多高,footer一直位于浏览器最底部,适合做移动端底部菜单,这个比较好实现;(向立凯)

二、相对固定,当页面内容高度不沾满浏览器高度,footer显示在浏览器底部,且不会出现滚动条,如果页面内容高度超出浏览器高度,footer则相对与内容的最底部,并且自动出现滚动条;(向立凯)

废话不多说,可以直接复制代码查看效果

一、永久固定

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
padding-bottom: 50px;
}

.footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
background-color: #eee;
z-index: 9999;
}
</style>
</head>
<body>
内容,可以大量复制看效果<br />

<div class="footer">固定在底部</div>
</body>
</html>

二、相对固定

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
}

.footer {
margin-top: -50px;
height: 50px;
background-color: #eee;
z-index: 9999;
}

.wrap {
min-height: 100%;
}

.main {
padding-bottom: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
内容,可以大量复制看效果<br />

</div>
</div>
<div class="footer">相对在底部</div>
</body>
</html>

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,我们将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 联系微信
  • 这是我的微信扫一扫
  • weinxin
  • 关注为微信公众号
  • 关注微信公众号扫一扫
  • weinxin

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    回复后请耐心等待管理员审核,谢谢!