完全なページ<iframe>

私は以下のサンプルコードを持っています。これは、モバイルデバイス上のブラウザを除くすべてのブラウザで正常に動作します。完全なページ<iframe>

オーバーフロータグが問題です。モバイル以外のすべてと

作品：すべてのモバイルなくコンピュータと

margin: 0; padding: 0; height: 100%; overflow: hidden;

作品：

margin: 0; padding: 0; height: 100%;

それは両方の上で動作するように取得するための最良の方法は何ですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
      <iframe width="100%" height="100%" src="http://www.cnn.com" /> 
    </body> 
</html>

出典

2013-07-17 Lacer

「cnn.com」にリダイレクトしないのはなぜですか。 – GolezTrol

cnn.comがその例です。私が防止しようとしている動作を表示する。 – Lacer

を含むHTMLの頭部にを追加してください。少なくとも部分的に）。 – Nukey

106

ここで作業コードだ次のスタイルを追加します。デスクトップやモバイルブラウザで動作します。それが役に立てば幸い。誰もが応答してくれてありがとう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 

      #content 
      { 
       position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" /> 
     </div> 
    </body> 
</html>

出典

2013-07-18 04:14:00 Lacer

上にiframeを配置したいときに気を付けると、Chromeに問題がありました。閉じてと追加しました。 –

iframe内のコンテンツから_responsiveness_（つまり、列の折りたたみなど）を取り除いているようです。しかし、何とかモバイルのサファリでページを開くときだけではなく、デスクトップブラウザのサイズを変更するとき。何がその行動を引き起こす可能性があるアイデア？ – psteinweber

@psteinweberでは、 'を含むページに追加するだけです。 – jfeust

これはこれまで私が使用していたものです。 iframeでも

html, body { 
    height: 100%; 
    overflow: auto; 
}

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

出典

2013-07-17 21:31:38

返信ありがとうが、それは本質的に私が持っているので、それは動作しません。モバイルブラウザでは、オーバーフローしているものを切り取り、スクロールさせません。 – Lacer

@Lacer 'overflow：hidden'を' overflow：auto'に置き換えてみてください。 –

それを試しました。モバイルブラウザではまだそれをカットし、デスクトップブラウザではダブルスクロールを引き起こします – Lacer

これはクロスブラウザでサポートされており、完全に応答します。

<iframe src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">

出典

2017-04-13 15:17:34

あなたのCSSでこれを入れてください。

iframe{ 
width:100%; 
height:100vh; 
}

出典

2018-03-08 19:19:02

答えて

関連する問題