0

Webサイトの一種のポップアップヘルプダイアログをエミュレートしようとしています。ユーザーがヘルプをクリックすると、マスクがページ全体を暗い部分的に透明なマスクで覆い、Zオーダーの高いヘルプページdivが表示されます。ヘルプページのdivは、幅80％、高さ90％で、左10％と上5％に絶対位置にあり、すべて体を基準にしています。これまでのところすべてが素晴らしいです。ヘルプページdivの内容は次のとおりです。-右に浮かぶ高さ20pxの近いアンカーを備えた全幅ヘッダー。-以下を含むヘルプページdivの残りの部分を占めるiframe-div：-問題のhtmlドキュメントを表示するiframe

問題：iframe-divの高さはヘルプページのdivより20ピクセル小さいと思いますが、奇妙な理由でヘルプページのdivより3ピクセル大きくなっています。その結果、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」要素はありません。

edit あなたはまだ少し不正確ですが (「DIV」を閉じるのを忘れていました)、答えがあります。「#helppage」の残りの部分を「.iframe-div」で埋める必要があります。「.iframe-div」の高さを 100% に設定すると、親要素である「#helppage」の高さが 100% になります。この問題を解決するには、「.iframe-div」の絶対配置が必要です。

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

または、javascript で高さを設定します。これをチェックしてください: DIV をページの残りの部分を垂直に埋めますか?

それはかなり一般的な質問です。

于 2011-08-25T07:13:02.530 に答える