HTML+CSS底部footer两种固定方式
2018-11-06 本文已影响41人
geeooooz
网页常见的底部栏（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>
css实现按钮固定在底部
想要把按钮固定在底部，让浏览器滚动时也不受影响。其实代码很简单的啦！
css如下:
<style>
.r{position:fixed; bottom:0;width:360px;left:0px;}
</style>
html如下:
<div>
<div class="r">
<input type="submit" value="确认添加" class="btn btn-primary"/>
</div>
</div>```
