如何自动将 iframe 的高度调整为加载到其中的内容-解网

问：

我想自动调整 iframe 的大小，使其与内容的高度相同，我希望在页面底部有 10px 的边距

<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/x-icon" href="IMAGES/icoon.png" sizes="128x128">
    </head>
    <body>
         <header class="menubalk">
            <div>
                <div class="logo">
                    <a href="home.html" target="mainiframe"><img src="IMAGES/logotransparantbovenbalk.png" alt=""></a>
                </div>
            </div>
            <nav class="menu">
                <ul class="navigatieknoppen">
                    <li><a href="offerte.html" target="mainiframe">Offerte aanvragen</a></li>
                    <li><a href="reviews.html" target="mainiframe">Reviews</a></li>
                    <li><a href="galerij.html" target="mainiframe">Galerij</a></li>
                    <li><a href="contact.html" target="mainiframe">Contact</a></li>
                </ul>
            </nav>
            <div class="login">
                <span class="loginicoon"><img src="IMAGES/inlogicoon.png" alt="" class="inlogicoon"></span>
                <a class="loginlink" href="login.html" target="mainiframe"><u>Login</u></a>
            </div>
        </header>
        <iframe src="home.html" name="mainiframe" id="mainiframe"></iframe>
        <footer>
            <div class="logofooter">
                <img src="IMAGES/logotransparantbovenbalk.png" alt="">
            </div>
            <div class="copyright">
                &copy Rens Ligterink
            </div>
            <ul class="contact">
                <li>telefoon: <span class="telnummer">0612345678</span></li>
                <li>e-mail: <a href="mailto:[email protected]" class="mail">[email protected]</a></li>
                <li>adres: example 2 <br>
                &nbsp &nbsp &nbsp &nbsp &nbsp 1111 ZX new york</li>
            </ul>
        </footer>
    </body>
</html>

这是我网站的 HTML，我的 iframe 称为 Mainiframe 这是CSS，请告诉我该怎么做，我已经尝试了几件事，但没有任何效果，这是我的CSS：

/*index.html*/

/*body*/
body {
    margin: 0;
    padding: 0;
}

/*header*/
.menubalk {
    background-color: #000000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.menu {
    margin: auto;
}

/*logo in de bovenbalk*/
.logo img {
    width: 240px;
}

/*verschillende paginas excl. login*/
.menu ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: auto;
}

.menu li {
    margin-right: 80px;
}

.menu a {
    text-decoration: none;
    color: #B9B9B9;
    font-family: Arial Black, sans-serif;
    font-size: 18px;
}

.menu a {
    margin-top: 10px;
}

/*login*/
.loginlink {
    text-decoration: none;
    color: #B9B9B9;
    font-family: Arial Black, sans-serif;
    font-size: 18px;
}

.loginicoon {
    font-size: 10px;
    align-items: center;
}

.inlogicoon {
    width: 24px;
    padding: 5px;
}

.login {
    display: flex;
    float: right;
    display: flex;
    align-items: center;
    text-align: auto;
    padding: 40px;
}

/*het iframe waar de pagina's in worden geladen*/
#mainiframe {
    /*width: 100%;*/
    border: none;
    /*height: 100%;*/
    width: 100%;
}


/*footer*/
footer {
    background-color: #000000;
    display: flex;
}

.logofooter img {
    float: left;
    width: 40%;
    padding-top: 50px;
    padding-left: 20px;
    padding-bottom: 70px;
}

.copyright {
    vertical-align: bottom;
    color: #B9B9B9;
    font-family: Arial Black, sans-serif;
    font-size: 11px;
    padding-top: 247px;
    padding-right: 100px;
}

.contact {
    list-style: none;
    float: right;
    margin-right: 10px;
    color: #B9B9B9;
    font-family: Arial Black, sans-serif;
    font-size: 18px;
    padding: 30px;
}

.telnummer {
    text-decoration: none;
    color: #E66C1F;
}

.mail {
    color: #4F8BC9;
    text-decoration: none;
}

/*algemeen*/

.title li {
    list-style: none;
    text-align: center;
    font-family: Arial Black, sans-serif;
    font-size: 44px;
    color: #2FC5EE;
    border-bottom: solid;
    border-color: #000000;
    padding-bottom: 50px;
    padding-top: 40px;
}

.title ul {
    padding: 0;
}

javascript html 、css iframe

<script>
        const resizeIframe = () => {
            const iframe = document.getElementById("mainiframe");
            const contentHeight = iframe.contentWindow.document.body.scrollHeight;
            const newHeight = contentHeight + 10; // Add 10px margin at the bottom

            iframe.style.height = newHeight + "px";
        };

        window.addEventListener("DOMContentLoaded", resizeIframe);
        window.addEventListener("resize", resizeIframe);

        // Wait for the iframe content to load before resizing
        document.getElementById("mainiframe").addEventListener("load", resizeIframe);
</script>

如何自动将 iframe 的高度调整为加载到其中的内容

how to automatically resize the height of the iframe to the content loaded into it

评论

评论