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

これは、ya' に対する jQuery Mobile 固有の回答です。

フッターの高さを変更したい場合は、フッターの子孫要素をターゲットにするのではなく、CSS でフッターをターゲットにすることをお勧めします。

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

デモは次のとおりです: http://jsfiddle.net/csKtX/1/ (以下の更新を確認してください)

  • .ui-mobilejQuery 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>ますか?私のアドバイスは、<div>それを正しい高さに設定することです.

これが役に立ったことを願っています..

于 2012-04-19T21:28:35.873 に答える