屏幕底部定位移动 CSS

发布于 2025-01-02 21:13:29 字数 605 浏览 0 评论 0原文

我正在尝试创建一个菜单，该菜单将粘贴在屏幕底部以进行移动导航，因此我使用了 position:fixed ，它适用于 PC，但不适用于移动设备。这是我使用的代码：

.menu_bar {
    background-color: #000;
    text-align: center;
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display:block;
    z-index: 9999;
}

这是演示这是一个 Opera Mini 模拟器

任何人都知道为什么我无法让它工作手机？谢谢:)

编辑：我发现大多数移动浏览器不支持 position:fixed，你知道有什么好的替代方案吗？也许在 Jquery 的帮助下？谢谢

原文

I'm trying to create a menu that will stick at the bottom of the screen for mobile navigation so I used position: fixed which works on PC but not mobile.
Here's the code I used:

.menu_bar {
    background-color: #000;
    text-align: center;
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display:block;
    z-index: 9999;
}

Here's the demo
And here's an Opera Mini emulator

Anyone know why I can't get it to work on a mobile? Thanks :)

EDIT: I see that most mobile browsers don't support position: fixed, do you know of any good alternatives? Maybe with the help of Jquery? thanks

分享到QQ

分享到微博

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

发布评论

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

墨小沫ゞ 2025-01-09 21:13:29

我只能考虑给桌子一个固定的位置，但我不确定这是否会导致进一步的问题，所以你会：

table {
    position: fixed;
    top: 0px
    bottom: 75px
}

.menu_bar {
    background-color: #000;
    text-align: center;
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display:block;
    z-index: 9999;
}

所以你仍然可以固定菜单栏，但你可能必须添加溢出：滚动;或溢出：自动；如果内容不滚动。我建议阅读 http://code.google.com/mobile/articles/webapp_fixed_ui。 html 使用 javascript 来滚动内容，这可能会更好。

I can only think to give the table a fixed position too, but I'm not sure if that'll cause further problems so you'd have:

table {
    position: fixed;
    top: 0px
    bottom: 75px
}

.menu_bar {
    background-color: #000;
    text-align: center;
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display:block;
    z-index: 9999;
}

So you could still have your menu bar fixed but you may have to add an overflow: scroll; or overflow: auto; if the content is not scrolling. I would suggest reading into http://code.google.com/mobile/articles/webapp_fixed_ui.html to use javascript to scroll the content instead, which will probably work better.

回复收藏 0 原文

~没有更多了~