CSSとIframe。 Iframeでスクロールせずに全ページを表示するにはどうすればよいですか？

私はCSSとIframeを使ってレイアウトを開発しようとしています。スクロールせずにiframeにフルページを表示するにはどうすればよいですか？ iframeはフルWebページを表示するのに適していますか？あなたがコードをテストする場合は、CSSは、ページ内のスクロールを作成することがわかりCSSとIframe。 Iframeでスクロールせずに全ページを表示するにはどうすればよいですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>layout basic method web</title> 
    <style type="text/css" media="screen"> 
     #container 
     { 
     width: 100%; 
     height: 100%; 
     background-color: #fff; 
     } 

     iframe 
     { 
     border-style: none; 
     width: 100%; 
     height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="top"> 
      <h1>Header</h1> 
     </div> 
     <div id="content"> 
      <h2>Subheading</h2> 
      <IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME> 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </div> 
</body> 
</html>

：ここ

はコードです。このスクロールを取り除き、すべてのページを表示するにはどうすればよいですか？

よろしく、

UPDATE：

私はほとんどそこです。フッターの上/下がヘッダーを超えていることが必要です。それは可能ですか？コードを見てください。ちょうどそれをコピー/貼り付けてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title> 
<style type="text/css" media="screen"> 
    #printhead {display:none;} 

    html { 
     height:100%; 
     max-height:100%; 
     padding:0; 
     margin:0; 
     border:0; 
     background:#fff; 
     font-size:80%; 
     font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; 
     /* hide overflow:hidden from IE5/Mac */ 
     /* \*/ 
     /*overflow: hidden;*/ 
     /* */ 
    } 

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;} 

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;} 

    /*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/ 

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;} 

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;} 

    .pad1 {display:block; width:18px; height:50px; float:left;} 

    .pad2 {display:block; height:50px;} 

    .pad3 {display:block; height:500px;} 

    #content p {padding:5px;} 

    .bold {font-size:1.2em; font-weight:bold;} 

    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;} 

    h2 {margin-left:5px;} 

    h3 {margin-left:5px;} 
</style> 
</head> 
<body> 
<div id="head"> 
    <div class="pad1"></div><h1>Header</h1> 
</div> 
<div id="content"> 
<div class="pad2"></div> 
    <IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME> 
<!--<div class="pad3"></div>--> 
</div> 
<div id="foot">Footer</div> 
</body> 
</html>

これを達成するための手掛かりはありますか？

よろしく、

出典

2010-12-30 André

必要なのiframeの使用：このような

あなたはインラインフレーム内のトップレベルのhtmlタグのマージン/パディングを持っている場合、あなたは（高さにピクセルを追加する必要があるかもしれません）/幅（）？あなたはajaxを調べるべきです。私は多分間違っている、あなたが達成しようとしているものに依存します。 – crodjer

iframeを使用する必要があるかどうかわかりません。私はヤフー、グーグルなどの完全なウェブサイトを表示するレイアウトを開発する必要がありますが、ユーザーは自分のドメイン（www.mydomain.com）でヘッダーとフッターを表示しています。 iframeを使用すべきか、他のテクニックを使用すべきですか？ –

あなたが見ているページの高さを一致させるためにはiframeの高さを設定する必要があります。

ページが同じドメイン内にある場合は、JavaScriptを使用して表示中のページの本文サイズに合わせてフレームのサイズを動的に変更できます。そこにはいくつかのjQueryプラグインがあります。

外部ドメインの場合、これを行うことはできませんので、iframeのheightプロパティを設定するだけで済みます。

出典

2010-12-30 11:45:36

レイアウトは外部ドメインのみで動作します。 iframeは間違った選択になる可能性があります。外部ドメインでの作業にはどうすればよいですか？ –

@Andre：AJAXリクエストでページが初期状態になると、iframeはあなたの探しているものと同じように見えますが、それ以上のナビゲーションはあなた自身のページから離れてしまいます。私が知っている限り、フルページの可視性を確保したい場合は、スクロールバーが付いています。 –

返事をありがとう。 –

あなたがメインウィンドウにスクロールバーを取り除きたい場合は、overflowスタイル追加：

#container { 
    width: 100%; 
    height: 100%; 
    background-color: #fff; 
    overflow: hidden; 
}

出典

2010-12-30 11:46:27 tcooc

返事をありがとう。私はテストしました。しかし、iframeは私が達成するためのツールではないようです。私は外部のドメインとだけ働くでしょう –

iframeのは、それが表示されているページへの相対的なサイズを調整することはできませんが。 JavaScriptのサイズを調整する必要があります。これは、あらかじめページのサイズを知っていることを意味します。あなたの中に別のページの内容を表示した直後の場合は、実際にajaxを見てください。

非常に単純な例では、ここで見つけることができます： http://aleembawany.com/2005/09/01/ajax-instant-tutorial

は、クロスドメインのコンテキストでAjaxでページをロードするため、ブラウザのセキュリティ設定に動作しない場合がありますので注意してください。

出典

2010-12-30 11:57:24 Bazzz

返事をありがとう。私は外部ドメイン（私のページ内の他のページの内容）だけで動作します。どのようにこの問題に対処する最良の方法は何ですか？ –

セキュリティの潜在的可能性があるため、Ajaxはクロスドメイン・ページをロードできません。あなたのためにデータを収集するためには、自分のドメインに "プロキシ"が必要です。 ajax経由で、自分のドメインのプロキシページを呼び出します。プロキシは、リモートページ上のfgetsを実行し、その内容をajax呼び出しに返すPHPページです。ここにPHPとjQueryのAjaxの例があります：http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html – Bazzz

こんにちは、それはいい考えですが、たとえばフラッシュのページで作業しますか？私は投稿を更新しました。私はほとんどそこにいる。私はヘッダーセクションの上にスクロールして行く必要があります、スクロールはヘッダーの上ではなく、フッターに行きます。これを達成することは可能でしょうか？ –

あなたはjavascriptでこれを行うことができます。そして、

function resizeFrame(){ 
    var iframe = parent.document.getElementById('id of your iframe'); 
    $(iframe).height($('#your top html tag inside your iframe').height()); 
    $(iframe).width($('#your top html tag inside your iframe').width()); 
    }

フォームの長さを変更する任意の表示/非表示アクション後負荷&にこの関数を呼び出す：のresizeFrameを（）;

$(iframe).height($('#your top html tag inside your iframe').height()+40); 
    $(iframe).width($('#your top html tag inside your iframe').width()+20);

出典

2012-08-12 13:31:55

ありがとうございました！：D –

CSSとIframe。 Iframeでスクロールせずに全ページを表示するにはどうすればよいですか？

答えて

関連する問題