当前位置： 文江博客话题详情

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

发布于 2024-11-02 20:24:17 字数 107 浏览 1 评论 0原文

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

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

原文

Is there any pure CSS only solution to keep footer fixed at bottom in Mobile Web-kit browsers?

Specially in iPhone and Android browser.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

恋竹姑娘 2024-11-09 20:24:17

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

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.

回复 原文
金橙橙 2024-11-09 20:24:17

使用弹性盒:)

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

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;
 }
回复 原文
弥繁 2024-11-09 20:24:17
#footer {
   position: fixed;
   bottom: 0;
}

jsFiddle。

从 iOS5 开始工作。

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

jsFiddle.

Works since iOS5.

回复 原文
~没有更多了~

关于作者

手心的海

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文