我正在嘗試使用下面的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