iframe内のCSS vhユニット

iframe内にCSS vhユニットを使用しようとしています。私は何とかiframeのサイズに合わせて縮尺されていることがわかりました。言い換えれば、100vhは窓の高さではありません。これはiframeの高さに設定されています。iframe内のCSS vhユニット

これが正しいようですか？

回避策はありますか？

出典

2015-12-03 in code veritas

これにはjavascriptを使用してください。 'window.innerWidth'と' window.innerHeight'をチェックしてください。 – www139

iframeは同じドメインにありますか？ – www139

あなたは私たちのためにjsfiddleを作ることができますか？ – www139

の下にコメントしてください私は、これは古い質問ですけど、人々はvhユニットに向かって移動すると、この質問は、はるかに一般的になるだろう。

ここでは、問題の例を示します。

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
iframe { 
    height: 50vh; 
    width: 100%; 
} 
</style> 
<body> 
    <iframe src="iframe.html"/> 
</body> 
</html>

とそのiframe：：私たちはiframeをロードするHTMLファイル持って

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
div { 
    height: 50vh; 
    width: 100%; 
    background: blue; 
} 
</style> 
<body> 
    <div></div> 
</body> 
</html>

をここで注意すべき重要なことは、両方のiframeとiframe'sdiv要素が高さを持つものとして指定されていることです50vh意図した動作は、親コンテクストのビューポートの高さまたは幅を受け入れることである可能性があります。その代わり、その結果は次のようになります。

ある

は、青色の要素の高さではなく、予想される50％（iframeの100％）で、〜ブラウザウィンドウの25％です。 iframeは親のビューポートを尊重したいと思うかもしれませんが、この例では直感的ではない場合がありますが、v*ユニットのコンテンツがiframe 'd inになるほど価値があります。ビューポートの高さがどのように決定されるかを示します。

the specより：

ビューポートのパーセンテージ長はブロックを含む初期の大きさに対するものです。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大または縮小されます。彼らは両方とも有効なビューポートされているよう

iframe、ブラウザウィンドウの両方が、initial containing blockすることができます。ビューポートはブラウザウィンドウに限定されず、ユーザが文書を参照する画面上のウィンドウまたは他の表示領域としてと定義されています。

iframeは、文書に挿入するときにnested browsing contextを作成するため、独自のビューポートを持ちます。

はい、これは意図した動作ですが、残念ながら純粋なCSSの回避策はありませんが、www139はこれをJavaScriptを使用してどのように実現できるかの例を示しています。この問題は、多くの要素のサイズがv*単位を使用して制御されるときに始まります。

出典

2017-06-19 15:23:39

これは素晴らしい質問です。悲しいことに、私はCSSで解決策を見つけ出すことができませんでしたが、JavaScriptで解決策を見つけ出すことができました。これは現時点で最善の策だと思います。このためにはフレームはである必要があります。

これが役に立ちます。この回答は改善が必要な場合は、:-)

window.addEventListener('load',function(){ 
    initializeV(); 
    function initializeV(){ 
      //1% of the parent viewport width (same as 1vw): 
      var vw = window.parent.innerWidth/100; 
      //1% of the viewport height (same as 1vh): 
      var vh = window.parent.innerHeight/100; 

      //assign width and height to your v unit elements here 
    } 

    window.parent.addEventListener('resize',function(){ 
      //when the browser window is resized; recalculate 
      initializeV(); 
    }); 
});

出典

2015-12-03 05:25:29 www139

@JamieCounsell \t "ここであなたのvユニットの要素に幅と高さを割り当てる"とはどういう意味ですか？それ、どうやったら出来るの？例を教えてください。ありがとう –

@SamGurdusはJavaScriptのCSSプロパティが設定されています。例えば、 'document.getElementById（" test "）。style.width = 10 * vw + 'px'; 'は要素#testの幅をビューポートの幅の10％（または10vw）に設定します。 – www139

iframe内に別のiframeがありますが、これはそれを破っていると思います。メインのiframeのコードは次のとおりです。 https://jsfiddle.net/samgurdus/o3vkhp5o/ –

iframe内のCSS vhユニット

答えて

関連する問題