How to make a html iframe 100% width and height?

To make the width and height of an HTML iframe 100%, you can achieve this through the following methods:

1. Setting Directly in HTML

You can directly set the width and height attributes on the iframe element to 100%, which allows the iframe to occupy the full available space of its parent container.

html
<iframe src="example.html" width="100%" height="100%"></iframe>

2. Using CSS

Another approach is to use CSS to set the width and height of the iframe. This method enables centralized style management, resulting in clearer HTML code.

html
<style>
    .fullSizeIframe {
        width: 100%;
        height: 100%;
    }
</style>
<iframe src="example.html" class="fullSizeIframe"></iframe>

3. Ensuring the Parent Element Has Appropriate Size

To have the iframe truly fill 100% of the width and height, the parent element must also be appropriately sized. Typically, the parent element should be set to 100% to allow the iframe to expand correctly. For example:

html
<html>
<head>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div class="container">
    <iframe src="example.html" width="100%" height="100%"></iframe>
</div>
</body>
</html>

By using any of the above methods, you can achieve 100% width and height for the iframe. Depending on the specific project and layout requirements, you can choose the most suitable approach.

2024年8月13日 10:24 回复

1个答案

1. Setting Directly in HTML

2. Using CSS

3. Ensuring the Parent Element Has Appropriate Size

你的答案