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.