BinaryDevelop
  1. ホーム
  2. html

[解決済み] 全ページ<iframe>表示

2022-09-13 02:14:49

質問

下記のサンプルコードを持っています。これは、モバイルデバイスのブラウザを除くすべてのブラウザで正常に動作します。

overflowタグが問題です。

モバイル以外では動作します。 

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>

どのように解決するのですか？

以下は、動作中のコードです。デスクトップとモバイルブラウザで動作します。 

<!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"></iframe>
        </div>
    </body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します