0

我正在尝试为我的网站模拟一种弹出帮助对话框。当用户点击帮助时，一个遮罩用一个黑色的、部分透明的遮罩覆盖整个页面，并且具有更高 z 顺序的帮助页面 div 可见。帮助页面 div 的宽度为 80%，高度为 90%，绝对位于左侧 10% 和顶部 5%，所有这些都相对于正文。到目前为止一切都很好。帮助页面 div 的内容是： - 一个全角标题，带有一个 20 像素高的闭合锚点浮动右侧。- 一个 iframe-div 占据帮助页面 div 的其余部分，包含： - 一个 iframe，用于显示有问题的 html 文档

问题：我希望 iframe-div 的高度比 helppage div 小 20 px，但由于某些奇怪的原因，它比 helppage 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 所指出的，当我试图简化场景时，一个重要的细节漏掉了，这已经得到了纠正。

4

1 回答 1

1

请在提问时准确无误。

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

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

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

或使用 javascript 设置高度。看看这个：让 DIV 垂直填充页面的其余部分？

这是相当普遍的问题。

于 2011-08-25T07:13:02.530 回答