css - 调整嵌入的 div

Question

我正在尝试为我的网站模拟一种弹出式帮助对话框。 当用户单击帮助时，一个 mask 会用黑色、部分透明的 mask 覆盖整个页面，并且具有更高 z 顺序的帮助页面 div 会变得可见。 帮助页 div 的宽度为 80%，高度为 90%，绝对位于左侧 10% 和顶部 5%，均相对于主体。 到目前为止一切都很好。 helppage div的内容是: - 一个全 Angular 标题，带有一个 20 像素高的 float 右 anchor 。 - 一个 iframe-div 占据帮助页面 div 的其余部分，其中包含: - 用于显示相关 html 文档的 iframe

问题: 我希望 iframe-div 的高度比帮助页面 div 小 20 px，但由于某些奇怪的原因它比帮助页面 div 大 3px。 因此，iframe 的底部是不可见的。

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>

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;
}

如有任何建议，我们将不胜感激

编辑 正如 mixel 所指出的，一个重要的细节被遗漏了，当我试图简化场景时，它已被纠正。

Answer 1

当你提问时，请准确。

1. “#helppage .window”选择器中有空格。它什么都不选择。因为“#helppage”不是绝对定位的。
2. 没有“#helpbox”元素。

编辑 虽然你还是有点不准确(你忘了关闭'DIV')，但还是有答案的。您需要用“.iframe-div”填充“#helppage”的其余部分。如果将“.iframe-div”的高度设置为 100%，它会占据父元素“#helppage”的 100% 高度。要解决此问题，您需要对“.iframe-div”进行绝对定位:

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

或者用 javascript 设置高度。 看看这个:Make DIV fill remainder of page vertically?

这是一个相当普遍的问题。