difficulty encountered when adjusting the height of an iframe within a webpage

https://i.sstatic.net/3f5Bh.pngI have created a simple webpage using bootstrap and now I am trying to embed it into another webpage. However, I am encountering an issue with setting the height of the embedded page. Here is my original webpage:

 <html> 
        <head>
        <style>
            #above1 { margin-bottom:6px; }
            #iframe1 { height:100%; width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px;  }
        </style>
        </head>
        <body>
            <div class="container-fluid">
                <div id="above1">        
                    <div class="row"> [content here]</div>
                    <div class="row"> [more content here]</div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <iframe id="iframe1" src="home.html"></iframe>
                    </div>
                 </div>
            </div>
        </body>
    </html>

This is the content of my 'home.html' webpage that I want to embed:

`<htlm>
    <head>
    </head>

    <body>
        <div class="container-fluid">
                    <div class="row" >
                <div class="col-md-6">

                    <img src="image/2.png" >
                </div>

                <div class="col-md-6">

                            <img src="image/1.png" >
                        </div>


            </div>
                    </div>
    </body>
    </html>`

After implementation, I am facing a scrollbar issue within the iframe. How can I resolve this problem?

Answer №1

Eliminate the height and width attributes in #iframe1

This code snippet is designed to automatically adjust the width and height of the iframe to properly display its content.

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iframe1' );
    resizeIFrameToFitContent( iFrame );

    // alternatively, to adjust all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe id="iframe1" src="home.html"></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

Height of Bootstrap Navbar

I'm in need of some advice when it comes to styling the navbar class. How can I correctly adjust the height of the navbar? Let's take a look at an example: <nav class="navbar navbar-light bg-light" style="height: 30px"> <a class="navb ...

Designing a form within a div container while ensuring that the content remains contained

I've been struggling to perfect this formatting for quite some time now. While I've come across many similar examples to what I'm aiming for, I just can't seem to get it right. My goal is to create a form that will "popup" using JS for ...

Guide to adding animation to the Bootstrap 4 Dropmenu

There is a collapse animation on the navbar toggler: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sca ...

Using node.js to add HTML content within a return function

I'm working on a web application using Node.js, Express, Jade, and MongoDB. I've created a page where users need to input a confirmation code into a form, which then calls a function to check if the code is correct (checkConfirmationCode). My go ...

Success message in Bootstrap 4 swiftly flashes after an ajax request

My Bootstrap 4 form modal displays a success message briefly upon submission before disappearing. Despite the successful data insertion into my database and alert box popup, I'd like to resolve this issue properly. Javascript <script& ...

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

Prevent CKEditor image-importer from automatically including dimensions

Is there a way to stop CKEditor from automatically adding sizes when importing an image? I would prefer to have control over the sizing. For instance, instead of this: Example 1 I'd like it to be like this: Example 2 Any suggestions on how to preve ...

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

Press the "share" buttons for social media on the YouTube video embedded on my site

As I work on developing my website which features a list of YouTube videos, one of the key requirements is to include share buttons below each video for easy social media sharing. Despite trying different options, I haven't been able to figure out how ...

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

Executing a function with the initial click

Is there a way to run a function only on the first click, without having it run every time? I already have another function running on window.onload, so I can't use that. Both functions work fine independently, but not together. Right now, I'm ca ...

Troubleshooting problems with printing HTML divs and page breaks caused by using float and position styles

Look at this class: .divDutySlip { width: 90mm; min-height: 120mm; padding: 2mm; /*float:left; position: relative; */ margin: 2mm; border: 1px solid #000000; page-break-inside: avoid; } I've modified two styles. Dis ...

Error: SVG graphic fails to render in live platform environment

I am encountering a problem with viewing the svg elements in production mode, even though they worked perfectly fine in development mode (localhost). My team and I suspect that the issue lies with gulp. <img src="assets/logo.svg" alt="Log ...

Should I generate the HTML files or dynamically populate them with content from the database?

Picture a scenario where a webpage contains a form allowing users to create their own discussion forum by inputting certain data. Within each forum, users can post various threads and topics. Option 1: Utilize PHP to generate a new HTML file every time a ...

Is it possible to apply a background image on top of an existing image?

Is it possible to set a background image on an img tag? This is my current HTML markup: <div id="content"> <img src="my-image.jpg" alt="image" class="img-shadow"> </div> Here is my CSS code: #content img { floa ...

Rendering a .stp file with Three.JS

I am in search of a way to create a basic 3D model preview using a '.stp' file. During my research, I came across the Three JS library. This library enables the rendering of 3D files similar to this example: I am eager to incorporate this funct ...

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...

Tips for making slanted lines using CSS

Can this image be created using CSS and/or Bootstrap 4? https://i.sstatic.net/ajzk6.png ...

Is it better to set the height of Material UI CardMedia based on aspect ratio or use vh

const customStyles = createStyles({ media: { height: 183 } }); <CardMedia className={classes.media} image="pic.jpg" /> Instead of setting the size in pixels, is there a method to adjust it based on an aspect ratio? For instanc ...