2

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

4 回答 4

3

你需要先设置

html, body {
    height: 100%;
}

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

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

于 2012-04-19T21:26:09.717 回答
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/

于 2012-04-19T21:37:20.860 回答
0

添加display: block属性，也许这可以帮助你

于 2012-04-19T21:28:31.830 回答
0

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

我希望这有帮助..

于 2012-04-19T21:28:35.873 回答