Sizing embedded divs

Question

I am trying to emulate a sort of pop-up help dialog for my web site. When the user clicks help, a mask covers the whole page with a dark, partially transparent mask, and a helppage div with a higher z-order is made visible. The helppage div is 80% wide and 90% high positioned absolute at left 10% and top 5%, all relative to body. So far all is great. The content of the helppage div is: - a full-width header with a close anchor 20px high floating right. - a iframe-div to occupy the rest of the helppage div containing: - an iframe to display the html document in question

The problem: I would expect the height of the iframe-div to be 20 px less than the helppage div, but for some odd reason it is 3px larger than the helppage div. As a result the bottom of the iframe is invisible.

The html:

<div id="helpbox">
  <div id="helppage" class="window" style="display: block; position: absolute;">
  <div class="hd-header">
    <a class="close" onclick="hidehelp()"></a>
  </div>
  <div class="iframe-div">
    <iframe id="HelpPageFrame" src="/help-system.html"></iframe>
  </div>
</div>

The css:

#helpbox .window {
  position:absolute;
  display:none;
  z-index:9999;
}

#helpbox #helppage {
    background: white;
  width:80%;
  left: 10%;
  top: 5%; 
  height:90%;
  padding: 0px;
  overflow: hidden;
}

#helppage iframe {
    border: none;
    width: 100%;
    height: 100%;
}

#helppage .iframe-div {
    width: 100%; 
    position: relative; 
    display: inline-block;
} 

#helpbox .hd-header {
  height: 20px;
  font-weight: bold;  
  overflow: hidden;
  display: inline-block;
  width: 100%;  
}
#helpbox .close {
  width:20px;
  height:20px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}

Any suggestions would be greatly appreciated

edit As mixel pointed out, an important detail slipped, when I trie to simplify the scenario, that has been corrected.

Answer 1

Please, be accurate, when you are asking questions.

1. There is whitespace in '#helppage .window' selector. It selects nothing. Because of that '#helppage' is not absolute positioned.
2. There is no '#helpbox' element.

edit Though you are still a bit innaccurate (you forgot to close 'DIV'), there is answer. You need to fill the remainder of '#helppage' with '.iframe-div'. If you set '.iframe-div' height to 100%, it takes 100% height of parent element - '#helppage'. To solve this problem you need absolute positioning for '.iframe-div':

#helppage .iframe-div {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
}

Or set height with javascript. Check out this: Make DIV fill remainder of page vertically?

It's fairly common question.