0

私は現在、携帯電話とタブレット用の Web アプリに取り組んでおり、jquery モバイルで別の問題が発生しました。私のヘッダーは上部に固定されており、その下にあるリストを持っています。左のものは、右のものに対して相対的に配置されます。

左のものは私のヘッダーの下に滑り込みます。実際にスクロールする必要はありませんが、スクロールはアクティブです。

誰かがヒントを持っていますか？

例

<div id="page" class="ui-page ui-body-c ui-page-active ui-page-header-fixed" data-role="page" data-url="page" tabindex="0" style="min-height: 491px; padding-top: 44px;">
    <div id="content" class="ui-content" data-role="content" role="main">
        <div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
        <ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
        <ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
    </div>
</div>

編集：

ここに、私の firebug コンソールの出力があります。

ここに画像の説明を入力

編集2：

奇妙なのは、html 要素のサイズです。

ここに画像の説明を入力

4

1 に答える 1

0

ヘッダーの位置が間違っています。コンテンツの一部であってはなりません:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div id="page" data-role="page" data-url="page" >
        <div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
            <h3>Header</h3>
        </div>
        <div id="content" data-role="content">
            <ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
                <li><a>Item 1</a></li>
            </ul>
            <ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
                <li><a>Item 1</a></li>
            </ul>
        </div>
    </div> 
</body>
</html>

作業例: http://jsfiddle.net/Gajotres/us2w5/

于 2013-02-01T08:42:10.417 に答える