web-dev-qa-db-ja.com

iframeを使用しているときにダブルスクロールバーを取り除く方法は？

私はこの問題をウェブ上で見ましたが、提案されたすべての解決策は私には役に立たないので、ここに来ると思いました。

Iframeがあるページがあります。ページの上部はドロップダウンメニューで、ページの残りはiframeです。私が他の誰もが確信しているようなアイデアは、メニューを固定したままにし、メニュー選択によりiframeでアプリケーションを実行することです。 iframeのコンテンツはスクロールしますが、ページ全体はスクロールしません。

Iframeを入れてみましたwidth=height=100%単一のテーブル要素内でwidth=height=100%しかし、ウィンドウを垂直方向に短くしすぎると、2つのスクロールバーが表示されます。

助言がありますか？

私は自分自身をうまく説明しなかったと思います。 iframeのスクロールバーを自動として保持したいのですが、ページ全体のスクロールバーが必要になることはありません。 iframeが適切にサイズ調整され、ページの残りの部分が常に正確に表示されるようにする必要があります。iframeが表示領域の底からはみ出してはならないため、ブラウザはスクロールバーを作成する必要がありません。

htmlcssiframescrollbar
22
stu

更新：

デモ：http://jsbin.com/ewomi3/3/edit

[〜＃〜] html [〜＃〜]

<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>

[〜＃〜] css [〜＃〜]

* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

注：私は最終的にあなたが望むものを理解しました！コンテナとしてtableタグの代わりにdivタグを使用してください！デモを見て楽しんでください！

16
Luca Filosofi

スクロールバーを削除するフレームでcssオーバーフローを非表示に設定します...

overflow:hidden
10
Gabe

私はこれが少し古いことを知っていますが、ここに私のページのためにしたことを示します：

IFrameだけのページがあり、ページ全体を占めるようにしたかったので、

<iframe style="height:100%;width:100%" src="..."></iframe>

適切なパディング/マージン/境界線の削除を追加した後、説明した二重スクロールバーの問題が発生しました。 Chromeの検査機能を使用して、ページの本文がiframeよりも約5px長いことを発見したため、iframeコードを変更しました。

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

それ margin-bottom:-5px;私のために問題を修正しました。

5
Liam Dawson

まだこの二重スクロールバーの問題を抱えている人にとって、あなたがしなければならないことは、overflow：hiddenの要素でiframeをラップし、html、body、iframe、ラッパーに100％の高さを追加することです。

http://jsfiddle.net/KZ5wz/ （JsFiddleで結果が適切に表示されない理由はわかりませんが、私のマシンではチャームのように動作しています）

3
Heri Hehe Setiawan
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body> 
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
3
Fabio R Cardoso

要件は明確です：

  1. Iframeの上にメニューバーがあります。これにより、iframeはフレーム付きページの下部まで完全にスクロールできないようです。
  2. ウィンドウスクロールバーは非表示にする必要がありますが、iframeスクロールバーは非表示にする必要はありません。

私の解決策は非常に簡単です：

  1. _overflow:hidden;_でウィンドウのスクロールバーを非表示にします。
  2. Iframeの高さを通常の100％ではなく、100％からメニューの高さまたはiframeの上にあるヘッダーを差し引いてください。メニュー/ヘッダーは全高の20％を占めると想定しますが、通常は高さが固定されているため、CSS3でheight: calc ( 100% - 120px );として計算するのが最適です。 iframeの周りのラッパーは、divまたは幅100％、高さ100％のテーブルにすることができます。

Iframeの高さを（ウィンドウの）80％に設定した私の例を次に示します。

スタイリング：

_body {
    overflow: hidden;
}
#hold_my_iframe {
    padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}
_

html：

_<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
    <iframe src="http:/example.com/my-iframed-page.php"
            width="100%" height="80%"
            marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
_
2
Ian Onvlee

本体を削除{高さ：100％; }

1
Irshad Khan

この質問には何とか答えられていないので、私は10セントを投じるだろうと考えました。私はあなたがdisplay:block/display:inline 設定。あなたの質問を完全に理解していないので、どうやってこれを行うかは正確にはわかりませんが、iframeをinlineの表示に変更したいと思うかもしれません。

0
Cosine

さて、質問は古いですが、今日は同じ問題がありましたが、答えはどれも私の問題を解決しませんでした。内部ページ（同じドメイン）のみで、2つの垂直スクロールバーも表示されました。読み込まれたページをナビゲートするもの（正しい）と、iframeゾーンの高さを少し調整するもの（！）...外部ソースページでは、うまく機能しているようです。

この問題を修正した方法は、次のように、ロードする内部ページの本文にクラスを追加することでした

<body class="internalPage">

cSSファイルに次の行を追加します

body.internalPage{height: 99.5%;}

これが将来誰かに役立つことを願っています。

0
ricardoc

Iframeの高さを動的に割り当てることで、ダブルスクロールバーの問題を解決しました。

StackOverflow-iframeの高さの動的変更

0
Jennifer Zhao