ホームページ > ウェブフロントエンド > CSSチュートリアル > ブラウザ全体で高さ 100% のフルスクリーン iFrame を実現し、スクロールバーを非表示にする方法

ブラウザ全体で高さ 100% のフルスクリーン iFrame を実現し、スクロールバーを非表示にする方法

Linda Hamilton
リリース: 2025-01-02 12:56:40
オリジナル
440 人が閲覧しました

How to Achieve a Full-Screen iFrame with 100% Height Across Browsers and Hide Scrollbars?

高さ 100% の全画面 iFrame

質問: iframe height=100% はサポートされていますか?すべてのブラウザ?

XHTML 1.0 Transitional では、高さ = 100% の iframe は、上部の別のフレームで 50 ピクセルの固定高さを考慮した後、残りのページの高さを取得しますか?これは主要なブラウザ (IE、Firefox、Safari) でサポートされていますか?さらに、scroll="no" が指定されている場合でもスクロールバーを完全に非表示にするにはどうすればよいですか?また、iframe の高さを自動的に設定するにはどうすればよいですか?

答え:

フレームセットを使用することも代替アプローチの可能性があります。iFrame も要件に対応できます。

iframe Height およびスクロールバー:

全画面の高さ (100%) を確保し、スクロールバーを非表示にするには、次のコードを使用します:

<body>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

スクロールバーを非表示にする追加のスタイル:

<body>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

非表示にするハック全幅のスクロールバー:

<body>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

親要素の overflow: hidden を設定することで、スクロールバーが非表示になります。 iframe は幅と高さの 150% に拡張され、スクロールバーがページ境界の外側に強制的に表示されます。これにより、iframe が残りのページの高さを完全に占めるようにしながら、表示されるスクロールバーが削除されます。

以上がブラウザ全体で高さ 100% のフルスクリーン iFrame を実現し、スクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート