我正在尝试使用下面的CSS修改页脚的高度。如果我使用像素设置高度，它将调整为正确的像素数量（例如height：100px;）。如下设置百分比值似乎不起作用。我只想将页脚设置为整个屏幕高度的百分比高度，以迎合不同的屏幕高度。有没有办法做到这一点？无法将高度设置为百分比

这里是我使用的代码：

.ui-page .ui-footer .ui-navbar a { 
    height : 60%; 
} 

     <div data-role="footer" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="/view" data-role="tab" data-icon="grid">View</a></li> 
        <li><a href="/add" data-role="tab" data-icon="grid" 
         class="ui-btn-active">Add</a></li> 
        <li><a href="/edit" data-role="tab" data-icon="grid">Edit</a></li> 
       </ul> 
      </div> 
     </div>

来源

2012-04-19 blue-sky

你能显示你的HTML吗？ – 2012-04-19 21:23:53

百分比高度仅在父元素具有设置高度时才有效。 – devstruck 2012-04-19 21:24:05

@tim peterson HTML在问题 – 2012-04-19 21:26:49

这是一个jQuery Mobile的具体答案为雅'。

如果你要改变的页脚的高度，那么我建议针对你的CSS页脚，而不是针对页脚的一些descentant元素：

.ui-mobile .ui-page .ui-footer { 
    height : 30%; 
}

这里是一个演示：http://jsfiddle.net/csKtX/1/（确保看更新下文）时jQuery Mobile的初始化

.ui-mobile被施加到HTML元素。
.ui-page适用于任何已初始化的伪页面。
.ui-footer被应用到任何初始化页脚

更新

我粘贴您的页脚代码到我的jsfiddle和找出的是，navbar小部件不采取高度的它的容器（最有可能你最初的无论如何...）。下面是jQuery Mobile的1.1.0修复：

.ui-mobile .ui-page .ui-footer > div,/*navbar container*/ 
.ui-mobile .ui-page .ui-footer ul,/*list-item container*/ 
.ui-mobile .ui-page .ui-footer ul li,/*list-items*/ 
.ui-mobile .ui-page .ui-footer ul li a/*individual buttons*/ { 
    height : 100%; 
}

这适用100%高度在页脚所有必要的元素，以便所有的后代元素通吃上的所有可用空间可能。

而新演示：http://jsfiddle.net/csKtX/2/

来源

2012-04-19 21:37:20 Jasper