How to Achieve a Full-Screen iFrame with 100% Height Across Browsers and Hide Scrollbars?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2025-01-02 12:56:40

Original

435 people have browsed it

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

Full-Screen iFrame with a Height of 100%

Question: Is iframe height=100% supported in all browsers?

In XHTML 1.0 Transitional, will an iframe with height=100% take the height of the remaining page after accounting for a fixed height of 50px in another frame at the top? Is this supported across major browsers (IE, Firefox, Safari)? Additionally, how can scrollbars be completely hidden, even when scrolling="no" is specified, and how can the iframe height be set automatically?

Answer:

While using framesets may be an alternative approach, iFrames can also accommodate the requirements.

iframe Height and Scrollbars:

To ensure full-screen height (100%) and hide scrollbars, use the following code:

<body>

Copy after login

Additional Styles for Scrollbar Suppression:

<body>

Copy after login

Hack to Hide Scrollbars with Full Width:

<body>

Copy after login

By making the parent element's overflow: hidden, the scrollbars are hidden. The iframe is expanded to 150% width and height, forcing the scrollbars outside the page boundaries. This eliminates visible scrollbars while ensuring the iframe fully occupies the remaining page height.

The above is the detailed content of How to Achieve a Full-Screen iFrame with 100% Height Across Browsers and Hide Scrollbars?. For more information, please follow other related articles on the PHP Chinese website!