6

誰かがすでに尋ねました、DiggBarはどのように機能しますか？前の質問で。

誰かがまともな答えを提供しましたが、それは1つのことを扱っていませんでした：

Diggは、異なるドメインのサイトのコンテンツに基づいて、iframeの高さをどのように動的に変更しますか？

フレーム化されたURLが独自のドメインにある限り、コンテンツに基づいて（javascriptを使用して）iframeの高さを動的に調整するためのSOに関する質問と回答がたくさんあります。 ただし、Diggは任意のドメインのWebサイトでこの問題を解決したようです。

SO Webプログラマーは、それをどのように達成したかを知っていますか？

注：iframeは単に100％の高さに設定されているわけではありません。iframeタグはそのようには機能しません。グーグル「100％高さiframe」とあなたは私が何を意味するかを見るでしょう。

4

5 に答える 5

18

彼らのCSSを見ると、彼らは：に使用height: 100%しています。iframe

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

それらはDiggBarをその上に高さで46px配置するので、iframe残りのスペースの100％を占めます。これらは、ページをスクロールさせるのではなく、要素を使用overflow: hiddenして、ページの垂直方向の高さ内に完全に収まるようにします。これは、スクロールバーがページ全体ではなく、の中に表示されることを意味します。DiggBarの動作は、Firefoxのクァークズモードでのみ機能することに注意してください。標準モードでそれを行う方法については、以下を参照してください。bodyiframeiframe

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

編集：私を信じていない人のために、ここに小さな例があります。スペース全体を埋めるには、境界線がないように設定する必要があります。また<body>、余白がないように設定する必要があります。

編集2：ああ、すみません、あなたが話していたことがわかります。スクロールバーを希望どおりに機能させるoverflow: hiddenには、タグにonが必要です。body

編集3：Firefoxでこれを機能させるには、クァークズモードにする必要があるようです。宣言を含めると、<!DOCTYPE html>標準モードになり、結果iframeが小さすぎます。

編集4：ああ、Firefoxの標準モードでも実行できます。ここで答えを得ました。<html>と<body>要素の高さもに設定する必要があります100%。（これは進行中の作業であるHTML 5<!DOCTYPE html>のDoctypeであることに注意してください。ただし、標準モードをオンにするためにすべての最新のブラウザーで機能します）。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>
于 2009-04-16T02:45:07.533 に答える
2

HTMLの問題の一部として、あるものの要素を100％の高さに設定して、ウィンドウスペース全体を占めるようにすることはできません。これを行う1つの方法は、ボディにウィンドウのピクセルの高さを持たせることです。ボディ内のすべてのものを100％に設定すると、ウィンドウのサイズになります。

基本的には、ウィンドウのonresizeイベントに関連付けられたJavaScriptを作成し、本文をウィンドウのサイズにサイズ変更するだけです。

これは私がjQueryを使用して作成した例です

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

これにより、divまたは別の要素を設定し、ウィンドウの高さ全体で機能させることができます。

于 2009-04-16T02:55:22.547 に答える
1

クァークズモードでは、iframeの高さを100％にすることができます。Diggはdoctypeを除外することでこれを実現しています。

于 2009-12-02T01:36:50.520 に答える
0

iFrameはDiggWebサイトにあり、ターゲットWebサイトが内部にあります。その逆ではありません。iFrameは100％の幅と高さに設定されています。

于 2009-04-16T02:29:16.447 に答える
0

iframe内の100％は、宣言された親スペースの100％パーセントです。例は次のとおりです。

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
于 2014-03-14T23:20:56.387 に答える