底部的屏幕定位手机CSS

Question

我想创建一个菜单，将坚持在移动导航屏幕的底部，所以我用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的帮助下？感谢

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

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