具體實現的效果:
1、不滿一屏的實現,按鈕始終在頁面的底部,如下圖所示:
2、如果滿一屏的話底部按鈕按鈕就會根據屏幕的長度始終在最後一行的底部,具體效果如下圖所示:
下面我來說說這種佈局的具體寫法:
html
<div class="containter">
<div class="content">
<p>文字測試</p>
<p>文字測試</p>
<p>文字測試</p>
<p>文字測試</p>
<p>文字測試</p>
<p>文字測試</p>
</div>
<div class="footer">我是底部</div>
</div>
css
*{
margin:0;
padding:0;
}
html,body{
height:100%;
font-size:60px;
}
.containter{
background:pink;
position: relative;
min-height: 100%;
}
.content{
text-align: left;
padding-bottom: 24vw;
}
.footer{
background:red;
position: absolute;
left: 6vw;
right: 6vw;
bottom: 6.66667vw;
}
實現的效果和上圖的效果是一樣的