0

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. Please help!

2 Answers 2

0

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.

0

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));
1
  • How would I do that and keep the scroll bar on the web page? I have variable content and I want to keep the experience consistent.
    – lostogre
    Aug 5, 2011 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.