0

I am currently working on a web app for mobile phones and tablets and got to another problem with jquery mobile. my header is fixed to the top an i have got to lists that are under it. the left one is positioned relative the right one absolute.

the left one slips under my header. the scrolling is active, although there is no need to scroll actually.

does someone have a hint?

example

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

EDIT:

Here you have got a print out of my firebug console:

enter image description here

EDIT 2:

The strange thing is the size of the html element:

enter image description here

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 回答