屏幕底部定位移动 CSS答案

【问题标题】：Bottom of Screen Positioning Mobile CSS屏幕底部定位移动 CSS
【发布时间】：2012-02-06 05:20:57
【问题描述】：

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

.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 这是一个 Opera Mini emulator

有人知道为什么我不能让它在手机上工作吗？谢谢:)

编辑：我看到大多数移动浏览器不支持position: fixed，你知道有什么好的选择吗？也许在 Jquery 的帮助下？谢谢

【问题讨论】：

刚看了那个演示页面，黑条还在底部（iPhone 4S）

标签： jquery css

【解决方案1】：

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

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 来滚动内容，这可能会更好。

【讨论】：