sticky footer 布局
2017-09-11 本文已影响27人
放飞吧自我
在网页设计中，sticky footer设计是最古老的和常见的效果之一，大多数人都应该经历过。它可以概括如下：当页面内容不足一屏时，footer在页面的最底部；当内容超过一屏时，footer在内容的最下面。如下图所示：
超过一屏.png
�不足一屏.png
解决方法
1.内容区域负padding
这种套路的思路是给内容区域设置min-height:100%,将footer推到屏幕最下方，然后将footer设置margin-top，其值为footer的高度，内容区域设置负padding-bottom值要大于或等于footer的高度，不能小于，一旦小于就会遮盖footer的内容
<小例子>
html代码：
<body>
<div class="container">
<div class="content">
主要内容
</div>
</div>
<div class="footer">底部</div>
</body>
css代码：
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.container{
width: 100%;
min-height: 100%;
}
.content{
font-size:24px;
padding-bottom: 50px;
}
.footer{
bottom:0;
width:100%;
height:50px;
background:red;
margin:-50px auto 0 auto;
}
2.将内容区域的底部外边距设为负数
这是一个比较主流的用法，把内容部分最小高度设为100%或100vh，再利用内容部分的负底部外边距值来达到高度不满时，footer保持在窗口底部，当高度超出则随之推到内容的底部。
html代码：
<body>
<div class="container">
<div class="content">
内容
<div class="sitg"></div>
</div>
</div>
<div class="footer"></div>
</body>
CSS代码
*{
margin:0; padding: 0;
}
html,body{
width:100%;
height:100%;
}
.container{
width:100%;
min-height:100%;
}
.content{
font-size: 48px;
margin-bottom:-50px;
}
.sitg{
height:50px;
}
.footer{
width:100%;
height:50px;
background-color:red;
position: relative;
}
3.使用calc( )设置内容高度
有一种方法不需要多余元素——使用css3新增的计算函数calc( ),这样元素之间就不会有重叠发生，也不需要控制内外边距了
HTML代码
<body>
<div class="content">
书写的内容
</div>
<footer class="footer"></footer>
</body>
CSS代码：
*{
margin: 0;
padding: 0;
}
.content {
min-height: calc(100vh - 50px);
font-size: 36px;
background-color: yellow;
}
.footer {
height: 50px;
background:red;
}
4.使用Flexbox弹性盒模型布局
HTML代码：
<body>
<div class="container">
内容
</div>
<div class="footer"></div>
</body>
CSS代码：
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.container{
flex:1;
font-size:36px;background-color: yellow;
}
.footer{
width:100%;
height:50px;
background:red;
}
5.Grid网格布局
HTML代码：
<body>
<div class="container">
内容
</div>
<div class="footer"></div>
</body>
CSS代码：
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.container{
flex:1;
font-size:36px;background-color: yellow;
}
.footer{
width:100%;
height:50px;
background:red;
}
注：网格布局（Grid layout）目前仅支持Chrome Canary 和Firefox Developer Edition版本
