- 需求分析：當頁面內容小於設備屏幕的高度時，底部footer部分固定在屏幕底部，當頁面內容超出屏幕高度時，底部footer部分隨頁面變動，始終在頁面的底部。
flex佈局實現
html部分
<body>
<header class="header-wrapper">標題部分</header>
<section class="cont-wrapper">內容部分</section>
<footer class="foot-wrapper">版權信息</footer>
</body>css部分
html,body,header,footer,section,div,p{
padding:0;
margin:0;
}
html{
height:100%;
}
body{
display:flex;
display:-webkit-box;
height:100%;
flex-direction:column;
}
.header-wrapper{
width:100%;
height:45px;
line-height:45px;
background:#abcdef;
text-align:center;
font-size:0.3rem;
color:#333;
}
.cont-wrapper{
font-size:0.3rem;
flex: 1 0 auto;
}
.foot-wrapper{
width:100%;
height:48px;
line-height:48px;
text-align:center;
background:#ccc;
font-size:0.3rem;
flex: 0 0 auto;
}兼容佈局實現
html 部分
<div class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>css部分
.detail{
position:fixed;
left:0;top:0;
width:100%;
height:100%;
z-index:100;
overflow:auto;
transtion:all 0.5s;
background:rgba(7,17,28,0.8);
.detail-wrapper{
width:100%;
min-height:100%;
.detail-main{
matgin-top:64px;
padding-bottom:64px;
}
}
.detail-close{
position:relative;
width:32px;
height:32px;
margin:-64px auto 0;
font-size:32px;
clear:both;
}
}