Question

在移动Web工具包浏览器中是否有任何纯粹的CSS解决方案可以将页脚固定在底部？

特别是在iPhone和Android浏览器中。

Answer 1

不是真的。那些浏览器实际上并不使用滚动;他们将文件放在无限的画布上然后平移。这或多或少是语义上的狡猾的措辞，说他们在实践中不支持position: fixed。

Answer 2

#footer {
   position: fixed;
   bottom: 0;
}

jsFiddle

自iOS5起作用。

Answer 3

使用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;
 }

在Mobile Web-kit浏览器中是否有任何纯粹的CSS解决方案可以将页脚固定在页面底部？

3 个答案: