How to remove Iframe scrollbar but full page should load?

In web design, embedding other pages using the <iframe> element is a common practice. If you want the embedded page to display fully without showing a scrollbar, you can achieve this using CSS. Here are two basic methods you can refer to:

Method 1: Using CSS to Set Styles

You can directly add the style attribute to the <iframe> tag to hide the scrollbar and ensure the content is fully displayed. For example:

html
<iframe src="your-page.html" style="width:100%; height:600px; overflow:hidden;" frameborder="0"></iframe>

In this example, overflow:hidden; is the key to hiding the scrollbar. You need to adjust the height property to ensure the embedded page's content is fully displayed without being truncated.

Method 2: Using External CSS

If you prefer to manage styles using external CSS, you can define a class in a CSS file and apply it to the <iframe> tag. For example:

css
.no-scrollbar {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 0;
}

Then apply this class in HTML:

html
<iframe src="your-page.html" class="no-scrollbar"></iframe>

This approach makes style management more centralized and unified, facilitating maintenance and modifications.

Notes

• Content Adaptation: Ensure the height of the <iframe> is sufficient to accommodate the embedded content, avoiding truncation.
• Cross-Origin Issues: If the page loaded by the <iframe> belongs to a different domain, it may not allow direct control of styles and behavior due to browser same-origin policies. In such cases, you may need to collaborate with the content provider or use server-side solutions to address cross-origin issues.

By using these methods, you can effectively manage the <iframe> scrollbar, making the page appear cleaner and more professional.