實(shí)例
<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
套路
- 一個(gè)展示內(nèi)容content的容器wrapper
- 一個(gè)展示footer的容器
- wrapper設(shè)置最小高度，保證可以展示全部?jī)?nèi)容
- 設(shè)置content下內(nèi)邊距籍嘹，給footer內(nèi)容預(yù)留位置
- 設(shè)置footer的外邊距方库，顯示在footer預(yù)留的位置上
- 外層清除浮動(dòng)
sticky footer的三種解決方案
1. 為內(nèi)容區(qū)域添加最小的高度
這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%)结序，然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度纵潦。
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
.content {
min-height: calc(100vh - footer的高度);
box-sizing: border-box;
}
2. 使用flex布局
這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割徐鹤。footer的flex設(shè)為0，這樣footer獲得其固有的高度邀层；content的flex設(shè)為1返敬，這樣它會(huì)充滿除去footer的其他部分。
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}
3. 在content的外面可以添加一個(gè)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劲赠，是為了防止未指定盒子類型時(shí)用內(nèi)邊距影響了盒子的高度*/
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的負(fù)值，此處用 */
height: 150px;
clear:both;
}
.clearfix {
display: inline-block;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
