sticky footer布局
2018-11-05 本文已影响0人
5jing
实例
<div v-show="detailShow" class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close" @click="hideDeatil">
<i class="icon-close"></i>
</div>
</div>
.clearfix
display: inline-block
&:after
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
.detail
position: fixed
z-index: 100
top: 0
left: 0
width: 100%
height: 100%
overflow: auto
background: rgba(7, 17, 27, 0.8)
.detail-wrapper
width: 100%
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto
clear: both
font-size: 32px
套路
- 一个展示内容content的容器wrapper
- 一个展示footer的容器
- wrapper设置最小高度，保证可以展示全部内容
- 设置content下内边距，给footer内容预留位置
- 设置footer的外边距，显示在footer预留的位置上
- 外层清除浮动
sticky footer的三种解决方案
1. 为内容区域添加最小的高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%)，然后减去底部footer的高度，从而求得内容区域的最小高度。
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
.content {
min-height: calc(100vh - footer的高度);
box-sizing: border-box;
}
2. 使用flex布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度；content的flex设为1，这样它会充满除去footer的其他部分。
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}
3. 在content的外面可以添加一个wrapper
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto; min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度，此处用padding，是为了防止未指定盒子类型时用内边距影响了盒子的高度*/
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值，此处用 */
height: 150px;
clear:both;
}
.clearfix {
display: inline-block;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
