转换后的jquery移动内容高度变化+奇怪的效果

时间:2015-02-19 19:21:14

标签: jquery html css jquery-mobile

我正在使用jquery mobile构建一个应用程序,在搜索了一些答案之后,我可以创建100%高度的内容div ..这里是我的html代码和js:

<body>
<div data-role="page" id="page1">
        <div data-role="header" data-position="fixed">
            <h1>Page 1</h1>
        </div>
        <div data-role="main" class="ui-content">                
            <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all">Go to Page Two</a>
        </div>
        <div data-role="footer" data-position="fixed" data-id="myfooter">
            <h1>Footer</h1>
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed">
            <h1>Page 2</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#page1" data-transition="slide" data-direction="reverse" class="ui-btn ui-corner-all">Go back to Page 1</a>
        </div>
        <div data-role="footer" data-position="fixed" data-id="myfooter">
            <h1>Footer</h1>
        </div>
    </div>
</body>

我在另一个讨论set content height 100% jquery mobile中找到了这个代码。所以,我的jquery代码是:

function contentHeight() {
var screen = $.mobile.getScreenHeight(),
    header = $(".ui-header").outerHeight(),
    footer = $(".ui-footer").outerHeight(),        
    contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(),
    content = screen - header - footer - contentCurrent;   
$(".ui-content").height(content);
}

$(document).on("pagecontainertransition", contentHeight); 
$(window).on("throttledresize orientationchange", contentHeight);

因此,在使用标签更改页面后,您可以看到滚动条显示,表示内容高度刚刚更改!我正在寻找一个100%高度的应用程序,可以在内容中添加更多标签(我不想为内容设置固定的高度..)但是在转换之后,这种效果发生在高度上... jquery我做错了什么?我是jquery的新手,所以我担心我做错了什么..

此外,在过渡效果期间,你可以看到页脚表现得很奇怪,改变了它的背景颜色,移动几个像素 ...是因为前一个问题?

非常感谢,抱歉英语不好

0 个答案:

没有答案