Is there any pure CSS only solution to keep footer fixed at page bottom in Mobile Web-kit browsers?
Is there any pure CSS only solution to keep footer fixed at bottom in Mobile Web-kit browsers?
Spe开发者_StackOverflow社区cially in iPhone and Android browser.
Not really. Those browsers don't actually use scrolling; they lay out the document on an infinite canvas and then pan across it. Which is more or less semantic weasel-wording to say that they don't support position: fixed in practice.
Use flexbox :)
<body>
<div id="mainPart"></div>
<footer></footer>
</body
<style>
body {
display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: vertical;
display: -moz-box; -moz-box-align: stretch; -moz-box-orient: vertical;
}
#mainPart { -webkit-box-flex: 1; -moz-box-flex: 1; position: relative; z-index: 2;}
footer{
background-color:#FFC579;
height:50px;
position: relative; z-index: 3;
}
#footer {
position: fixed;
bottom: 0;
}
jsFiddle.
Works since iOS5.
加载中,请稍侯......
精彩评论