Question

我正在尝试为我的网站模拟一种弹出式帮助对话框。当用户单击帮助时，掩码覆盖整个页面，使用深色，部分透明的蒙版，并且可以看到具有更高z顺序的helppage div。 helppage div宽80％，90％高位于左侧10％和前5％，均相对于车身。到目前为止一切都很棒。 helppage div的内容是： - 一个全宽标头，右侧有20px高的紧密锚。 - 占用helppage div的其余部分的iframe-div包含： - 用于显示问题的html文档的iframe

问题：我希望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所指出的那样，当我试图简化场景时，一个重要的细节已经滑落，已经得到纠正。

Answer 1

当你提问时，请准确。

'#helppage .window'选择器中有空格。它什么都不选。因为'#helppage'并非绝对定位。
没有'#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设置高度。看看这个：Make DIV fill remainder of page vertically?

这是相当常见的问题。

调整嵌入式div的大小

1 个答案: