web-dev-qa-db-ja.com

JS-100％でスクロールなしのiframeの高さ（本体はScroll-y）

Iframeに問題があります。まず、 https://stackoverflow.com/search?tab=relevance&q=iframe%20height でキーワードiframe heightを検索しましたが、必要な人が見つかりませんでした。

スクロールなしで100％の高さのiframeを作成する方法。本体をスクロールしてください。

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

そして、iframeで http://www.google.com を介して何かを検索した場合は、Googleの検索結果ページに移動します。 iframeは新しい高さを計算しますが、iframeの高さは100％のままで、本体部分のスクロールバーです。 （ieとfirefoxだけでなく、safariとchrome）でもいくつかの助けが完璧に機能することを願っています）。どうもありがとう。

javascriptiframeheight
7
cj333

これはあなたが探していることをするはずです：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>

    <style type="text/css" media="screen">

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

        * {
            padding: 0;
            margin: 0;
        }

        iframe {
            width: 960px;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>

</head>
<body>

    <iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

ここでの鍵は次のとおりです。

  • BODY要素とHTML要素をブラウザウィンドウの100％にすると、iFrameを100％にすると、100％になるようになります。
  • スクロールバーが表示されないように、BODY要素とHTML要素をoverflow：hiddenに設定します
  • パディングがないことを確認してください

それが役立つことを願っています

6
Jesse Bunch

私のJQueryプラグインを使用してください：

 $.fn.resizeiframe=function(){
    $(this).load(function() {
        $(this).height( $(this).contents().find("body").height() );
    });
    $(this).click(function() {
        $(this).height( $(this).contents().find("body").height() );
    });

}

次に、次のように使用します。

$('iframe').resizeiframe();

iframeの属性を次のように調整することを忘れないでください：

<iframe
   src="islem.html"
   frameborder="0"
   width="100%"
   marginheight="0"
   marginwidth="0"
   scrolling="no"
></iframe>
2
Abdennour TOUMI

私は同じ効果を探していて、方法を見つけました。メトリックセクションのChrome（またはfirebug））で 'examine element'を参照する場合は、<html>を選択します。html領域がドキュメント全体よりも小さいかどうかを確認する必要があります。 .htmlを高さ：300％に設定すると、機能するはずです。重要な機能は次のとおりです。

html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}

***コーディングした可能性のある最大の高さに注意してください。効果が台無しになります。

私の場合、フレームの高さをコンテナ内の別の要素で分割する必要があったため、スクロールバーが表示されずに完全に伸びることができました。そのため、firebugを使用して、コンテナに残っている高さの割合を計算する必要がありました。

-------別の方法、簡単：

HTMLドキュメントの両方に高さを指定しないようにしてください。

html, body {}

次に、これのみをコーディングします。

#some-div {height:100%;}
#iframe {height:300%;}

注：divをメインセクションにする必要があります。

これは比較的うまくいくはずです。 iframeは、表示されているウィンドウの高さの300％を正確に計算します。 2番目のドキュメント（iframe内）のhtmlコンテンツの高さがブラウザーの高さの3倍よりも小さい場合は、機能します。そのドキュメントにコンテンツを頻繁に追加する必要がない場合、これは永続的な解決策であり、コンテンツの高さに応じて必要な独自の％を見つけることができます。

1
pixelfe