sucky sucky go
New Member
I'm building a page where I have a two div's. One div is used as the header, and the other div contains an iFrame.Currently, I have some JQuery and CSS working together in order to get resize the iFrame depending on the size of the window it's being viewed. I've done some initial testing, and it works on Firefox, Safari, Chrome, IE 9, and the default/stock browser on Android 2.3.However, when I try to view the page on an iPad, iPhone or BlackBerry, it looks like the iFrame is resizing, but you are then unable to scroll the full length of the iFrame page. You're stuck basically. But on an Android phone, I am able to scroll down the page, which is strange.Here is the CSS code I am using:\[code\]#header { float: left; width:100%; height:75px; background: #21a5d3; /* Old browsers */}#portal { position: fixed; top: 75px; left: 0px; width: 100%; bottom: 0px; min-width: 100%;}iframe#iframeclass { width: 100%; height:100% }\[/code\]Here is the HTML:\[code\]<div id="header"></div><div id="portal"> <iframe src="http://www.bbc.co.uk/" id="iframeclass" frameborder="0"></iframe></div>\[/code\]And here is the JQuery I'm using:\[code\]<script> var widthRatio = $('#portal').width() / $(window).width(); $(window).resize(function() { $('#portal').css({width: $(window).width() * widthRatio}); }); </script>\[/code\]