Question

我需要更改'content'div的高度，因为我使用了这段代码，但是它永远不会有效......任何想法都可以吗？

$(window).bind('orientationchange', function() { 
    var screenWidth = $(window).width();
    if(screenWidth >= 768){
        var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
        $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
    }
});

特别是我在ipad和平板电脑上使用它。

Answer 1

如果orientationchange事件正确绑定那么它似乎是有效的...通过在bind中放置警报消息进行检查...我已经做了一个小例子来通过点击事件（http://jsfiddle.net/reddyprasad321/zj9LV/）来改变高度

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="page">
    <div data-role="content" id="contentDiv">
    This is Content Div ....  
    </div>
    </div>
</div>

和js：

$('#contentDiv').click(function(){
    $('#contentDiv').height( $('#contentDiv').height()+20);
});

和css看到差异：

#contentDiv{
    height:20px;
border-width: 5px;
border-spacing: 10px;
border-spacing: 10px;
border-image: initial;
border-color: red;   
line-height: 34px;
border-left: solid 1px #95C864;
border-right: solid 1px #74AE3B;
border-left: solid 1px rgba(255, 255, 255, 0.3);
border-right: solid 1px rgba(0, 0, 0, 0.1);
background:green;
}

并在此处检查设置高度 http://api.jquery.com/height/

MJQ - orientationchange永远不会改变div的高度

1 个答案: