网页布局中页面内容不足一屏时页脚footer固定底部
实现样式:
-页面内容不足一屏时页脚固定在底部;
-页面内容超过一屏时,滚动内容到底部时出现页脚;
下面介绍两种方案,第一种方案依赖于浏览器对box-sizing的支持,所以对于低版本IE会有兼容问题,第二种方案对现代浏览器的兼容性无忧。
废话不用多说,直接贴代码啦~
1方案:
代码块语法遵循标准markdown代码,例如:
<!DOCTYPE html>
<html>
<head>
<title>footer Fix</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
.header {
height: 60px;
margin-bottom:-60px;
background: maroon;
position: relative;
}
.content {
background: #CCC;
min-height: 100%;
padding: 60px 0;
}
.footer {
height: 60px;
margin-top:-60px;
background: maroon;
}
</style>
</head>
<body>
<div class="header">head</div>
<div class="content">
1content</br>content</br>2
</div>
<div class="footer">footer</div>
</body>
</html>
2方案
<!DOCTYPE html>
<html>
<head>
<title>footer Fix</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
html,body, .wrap{
height: 100%;
}
.head-head {
height: 60px;
background:blue;
}
.wrap {
height:auto;
min-height: 100%;
}
/*.main {padding-bottom: 150px;}*/
.header {
height: 60px;
background: maroon;
}
.content {
background: #CCC;
}
.footer {
position:relative;
clear:both;
height: 60px;
margin-top:-60px;
background: maroon;
}
.clearfix:after {
content:'';
display: block;
height: 60px;
clear: both;
visibility: hidden;
}
/*.clearfix {display: inline-block;}*/
/*.clearfix {display: block;}*/
</style>
</head>
<body>
<div class="head-head">head-head</div>
<div class="wrap">
<div class="mian clearfix">
<div class="header">head</div>
<div class="content">
1</br>content</br>2
</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
这里贴出了两种简单的方案,当然还有其他实现方法,待以后慢慢研究。