jquery mobile breaks % height
Hello.
When I open the page below in a browser (eg Firefox 21 on a desktop pc) it looks as Id expect.
Scrollbars get shown on the left (blue) and right (green) portions of the page to allow scrolling of content which is too big.
If I include jquerymobile (by uncommenting the script in the head) then it breaks..scrollbars are no longer shown..the content is shown in its full size and not restricted to the specified 20% and 10%.
If I use fixed pixel heights as opposed to % then it works. eg replace the "height:20%" by "height:100px" ..scrollbars reapppear
Is this a known problem?
Any workarounds?
Thanks in Advance
- <!DOCTYPE html>
<html style="width:100%;height:100%">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />-->
<!--<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>-->
</head>
<body style="width:100%;height:100%">
<div id="mainHolder" style="width:100%;height:100%">
<div id="leftHolder" style="width:30%; height:20%; overflow: auto; float: left; background-color: blue">
<div id="lvCtxs" >
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
<div> Context 1 </div>
<div> Context 2 </div>
<div> Context 3 </div>
</div>
</div>
<div id="rightHolder" style="width: 70%; height:10%; overflow: auto; float: left; background-color: green">
<div id="lvMesgs" >
<div> Mesg 1 </div>
<div> Mesg 2 </div>
<div> Mesg 3 </div>
<div> Mesg 1 </div>
<div> Mesg 2 </div>
<div> Mesg 3 </div>
</div>
</div>
</div>
</body>
</html>