In our daily in development, often encounter to secure the bottom, the content automatically when the high side down softened the design draft. This requires the mobile ones of the frequency!
Look at the following design draft, I was a takeaway from the above screenshot APP. Sensitive information has hit the horse.
Other content, we do not see, we look at the bottom of the Close button, special offers and business announcements body content. We now assume that the merchant offers and announcements a few times, the Close button at the bottom. In many cases the content, can also be called down. DETAILED following effects gif.
Earlier on the html:
<div class="content-wrapper">
<div class="content">
<p>I'm contented!</p>
<!-- put your html in here -->
</div>
</div>
<div class="footer">
<span>close</span>
</div>Then there is the css section
body,html{
margin: 0;
padding: 0;
height: 100%;
}
p{
font-size: 2em;
}
.content-wrapper{
overflow: auto;
min-height: 100%;
background-color: rgba(0,0,0,.5);
}
.content-wrapper .content{
padding-bottom: 64px;
text-align: center;
}
.footer{
margin-top: -46px;
height: 46px;
width: 100%;
text-align: center;
}
.footer span{
padding: 5px 10px;
background-color: red;
border-radius: 5px;
}Such code can achieve the above effects. It is also among the more classic layout css sticky footer layout. Preview my point is best under review in your phone model preview.
Written on the back:
This layout is still a little bit flawed! such as:
1, footer <div> height must be fixed. .
2, content <div> must be based on the padding-bottom footer <div> height changes.
Finally, put a few reference sites, for your own choice, achieve results on the map gif!
https://css-tricks.com/couple-takes-sticky-footer/
http://www.cssstickyfooter.com/cn/using-sticky-footer-code.html
