ブラウザ全体で高さ 100% のフルスクリーン iFrame を実現し、スクロールバーを非表示にする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Linda Hamilton

Jan 02, 2025 pm 12:56 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。