【问题标题】：Unable to set height as a percentage无法将高度设置为百分比
【发布时间】：2012-07-16 20:41:05
【问题描述】：

我正在尝试使用以下 CSS 修改页脚的高度。如果我使用像素设置高度，它将调整为正确的像素数量（例如高度：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>

【问题讨论】：

百分比高度仅在父元素具有设定高度时才有效。
@tim peterson HTML 发布问题

标签： jquery css jquery-mobile

【解决方案1】：

你需要先设置

html, body {
    height: 100%;
}

这将允许您在任何属于body 的直接子元素的元素上设置百分比高度。

http://jsfiddle.net/mblase75/w7mMZ/

【讨论】：

【解决方案2】：

这是一个 jQuery Mobile 的特定答案。

如果你想改变页脚的高度，那么我建议用你的 CSS 来定位页脚，而不是定位到页脚的某些后代元素：

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

这是一个演示：http://jsfiddle.net/csKtX/1/（请务必查看下面的更新）

.ui-mobile 在 jQuery 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/

【讨论】：

【解决方案3】：

它是否可能不适用于锚元素<a>，因为您似乎在引用它，所以我的建议是创建一个 <div> 并将其设置为正确的高度。

我希望这会有所帮助..

【讨论】：

【解决方案4】：

添加 display:block 属性，也许这对你有帮助

【讨论】：