web-dev-qa-db-ja.com

iframeがページ全体を100％とtop：4pxで埋める方法

私はしばらくここに来て、以前は1つの質問しかしませんでした。そして私は多くのサイトをデザインしました。ただし、完全に取得できないのは「iFrame」だけです。彼らは私の頭を少し混乱させます。

。：私が達成しようとしていること：.

注：iFrameドメインのオリジンの所有権はありません... 1つのページを取得し、それを別のページに表示しているだけなので、無関係である必要があります。彼らの外部スタイリングはまだそれがどうあるべきか彼らのページを示しています。私はそれをしたので私はこれを知っています。

1）iFrameをフルページとしてサイトに表示する方法を知る必要があります。 iFrameに関するトピックはたくさんありますが、1）古くなっています。 2）私/私のサイトには適用されません。私はすべてを試しましたが、それでもすべて無駄です。

。：例：。

ユーザーが http://www.example.com/news.php にアクセスすると、ページは別のニュースサイトからコンテンツをロードするはずです。つまり、cnn、wn、cbs ...

これは以前にわかったので、コンテンツの所有権がないことについてのガラクタをno1教えてください。そうしないと、目標を達成できません。

どのように書いたかは覚えていませんが、CSSスタイリングがまったくなかったことがわかります。それは次のようなものでした。

    <body style="scrolling:no;>
    <iframe src='http://www.example.com' 
    style='position:absolute; top:4px; left:0px; width:100%; height:100%; 
    z-index:999' onload='sendParams();' frameborder='no' scrolling='auto'>
    </iframe>
    </body>

取得できないのは、iFrameのカスタマイズに使用するスタイルに関係なく、size= 867x155に関するボックス内に保持されているようです。私はiFrame自体をDIV内に配置することも試み、DIVをW- 100% H- 100%に設定しました。

cSSアプローチを試したところ、marginheight/widthは無視されました。また、margin="0"の別のボディスタイルは無駄でした。再び。

javascripthtmlcssiframe
17
The Antarctican

見てください： http://jsfiddle.net/cgXcR/

HTML：

<iframe src="http://www.cnn.com" height="100%"></iframe>​

CSS：

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

iframe { width:100% ;
        height:100% ;
    border:none ;
}
18
Cynthia

わかりました、まあ私は彼女の助けのためにシンシアに感謝したいと思います。

しかし、誰かが実際に機能する単純な答えを探しているなら、これをチェックしてください：

元の問い合わせと同様：FULL iFrame

CSSを使用した解決

<blah>
<head>
<style type="text/css">
    body {scrolling:no;
}
    iframe {position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}
</style>
</head>
<body>
    <iframe src="http://www.wn.com" height="100%" width="100%" frameborder="0"></iframe>
</body>

positioning＆z-index

* 注：これはマークアップのみで記述できます。CSSを使用する必要はありませんが、これを行う方が理にかなっています。 CSSを使用してiFrameをカスタマイズすると、Webページ内の個々のフレームごとにより多くのウィンドウが開きます。私と同じように、1つのiFrameのみを使用する場合は、単純にMARK-UPを使用する必要があります。ただし、1つ以上ある場合は[または1フレーム内に多くの]があるので、CSSを使用して各フレームを具体的にIDする必要があります。*

また、マークアップのみを使用する方法を誰かが疑問に思っている場合は、CSSの内容を入れ替えて、<iframe></iframe>に入れますが、一重引用符を使用します

The Antarctican

10
The Antarctican