iFrame not expand to 100% height

Question

I have this below html. And I would like the iFrame to cover the rest of the screen with 100% on whatever left. I tried \"100%\" and \"*\" in height attribute but not working. W

Answer 1

The reason height: 100% does not work is because % heights do not work on children whose parents do not have an explicit (non %) height. So this does not work:

parent {
  height: 60%;
}

child {
  height: 100%;
}

while this does:

parent {
  height: 60em;
}

child {
  height: 100%;
}

Child does not know what 60% means, so instead it becomes height: auto (height determined by static content inside it).

Child does know how to figure out a % of 60em, or any other explicit unit.

There are some exceptions to this rule. One is where when both the html and body elements are given height: 100%, you may use height: 100% or min-height: 100% on a direct child. (You could try height: 96% as Pat suggested but know this will be completely different values per screen/browser height. At unexpected sizes you could lose content.)

Unless I'm misreading the HTML, it looks like you have two direct children: the iframe and #container-frame.

You could try absolutely positioning #container-frame at the top of the viewport (so it can sit above the rest of the page, and by "above" I mean "closer to the user on the z-axis"), and if the iframe isn't set to 100% high but maybe like Pat's example, 96% or something, you could then maybe give the iframe some top padding to make visual room for #container-frame. If you don't, the top of the iframe would be obscured by #container-frame and people would miss the top. Know that you can't add top or bottom margins, padding, borders, etc to a 100% high box. That would give you something more than 100%!

Another exception to the % height rule is with absolutely positioned elements in general. They may have a % height as well, except IE6 has issues with this. So possibly absolutely positioning both direct children can work, if you don't mind hacking for IE6 or don't care about IE6. Generally I don't like positioning everything on a page but that might be easiest in a case like this.

Answer 2

You could try simply using <object> instead of <iframe>

Example:

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

Note that most people will recommend against using any kind of framing (using object or iframe), for security purposes.

Update

I forgot! There may also be a way to adjust the iFrame dynamically using a javascript function that runs after the body loads. There is a very good example of it here.

Answer 3

This CSS will should do the trick for you:

body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

Then set the height of the iframe to 96%. This will stop it from being pushed off the bottom of the page.

The reason you need this is because 100% height on the iframe is calculated as 100% of the available screen height. Since you've got a 35px tall div above the iframe, you end up with an iframe pushed 35px beyond the total screen height.