更新

Question

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

Answer 1

您需要先设置

html, body {
    height: 100%;
}

这样您就可以在body的直接子元素的任何元素上设置百分比高度。

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

Answer 2

这是一个针对ya'的jQuery Mobile特定答案。

如果你想改变页脚的高度，那么我建议用你的CSS定位页脚，而不是针对页脚的一些下降元素：

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

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

.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/

Answer 3

添加 display：block 属性，也许这可以帮助您

Answer 4

它是否可能无法在锚元素<a>上运行，因为你似乎在引用它，我的建议是制作一个<div>并将其设置为正确的高度。

我希望这有帮助..

无法将高度设置为百分比

4 个答案:

更新