HTML+CSS底部footer两种固定方式
2017-11-01 11:01
666 查看
网页常见的底部栏(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>
一、永久固定,不管页面的内容有多高,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>
相关文章推荐
- footer固定底部-HTMLCSS方法
- 让footer固定在页面(视口)底部(CSS-Sticky-Footer)
- 利用CSS使footer固定在页面底部
- 利用CSS使footer固定在页面底部
- 两种方式实现footer固定在页面最下方布局
- footer固定在网页底部且居中,超过一屏自动撑开(最简单的CSS实现)
- 手机wap页面底部固定条(html+css)
- 使用css固定底部footer(解决内容不充实底部上移问题)
- html css html底部固定
- 网页底部固定的两种方式
- #笔记 简单使用flex与sticky footer方式解决底部固定在底栏的问题
- 一道经典的css面试题。固定底部(sticky footer)
- div footer标签css实现位于页面底部固定
- A CSS Sticky Footer——CSS底部固定布局分析
- 让footer固定在对底端的两种方式
- html中header,footer分别固定在顶部和底部
- Css Sticky Footer将页脚固定在页面底部
- 【Web Trick 4】CSS 实现footer固定页面底部
- 利用CSS使footer固定在页面底部的实例代码
- Css如何定位网站的footer在固定位置(用DIV+CSS让footer始终在底部)