How to resize an iFrame contained in a div, inside a <td>

I am making a page that has a nested drop down menu system on the left side. Each item on the menu points to a different page. In order to keep page loading time to a minimum, I am loading the content into an iFrame that is contained in a div that is wrapped in a td. I have observed that when the screen is too short, the menu can render off of the page. I would like to resize the iFrame to fit within the confines of the window, hopefully preventing the menu from rendering off screen, by making the screen the same size as the window, and also preventing the dreaded multiple scroll bars.

I have tried several methods to accomplish this without luck. The various methods that I have tried include this and these. I am at a loss and have started beating my head on the monitor. Pleas开发者_开发知识库e help!

Without a code example, it's hard to diagnose, but I would recommend that you ensure that the width and height attributes are set to 100% on the iframe AND that you have a height:100% style on the div and td that contain the iframe.

It's a common mistake to assume that all of your elements will take on 100% height of a child element.

Apart from that, I would urge you NOT to use iframes for this purpose. There are plenty of caching options out there nowadays and you will shoot yourself in the foot when it comes to scaling, javascript, etc.

You could eliminate the iFrame and use Ajax to load up the secondary content into hidden DIVs, after the page (and the primary content) has been rendered.

Otherwise, why couldn't you just us something like

 $("iFrame").css("height", $(window).height() - some offset));