使 iframe 更高

Question

我无法处理 iframe。我试图在其中插入我的课程，但尽管宽度似乎很容易管理，但高度不会响应功能的增加。结果是一个 iframe 占据了页面的宽度，但是太窄以至于无法舒适地向下滚动。下面我留下代码（问题是中途）和我的网页，https://rubencioak.github.io/cv2.html，以防它有任何帮助。

<body>
        <!-- Wrapper -->
        <div id="wrapper">
            <!-- Main -->
            <div id="main">
                <div class="inner">
                    <!-- Header -->
                    <!-- Google Tag Manager (noscript) -->
                    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWMMZHX"
                    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                    <!-- End Google Tag Manager (noscript) -->

                    <header id="header">
                        <a href="https://rubencioak.github.io/" class="logo"> rubencioak.github.io  </a>
                        <ul class="icons">

                        <li><a href="mailto:rubenprzsnz@gmail.com" class="icon fa-envelope"><span class="label">Email</span></a></li>  
                        </ul>
                    </header>
                    
                    <!-- Content -->
                    <section>
                        <header class="main">
                            <h1>Curriculum Vitae</h1>
                        </header>

                        <!-- About Container -->
                        <div class="w3-container">
                            <div class="w3-content w3-text-color2 w3-padding-64" style="max-width:700px">
                                <p>
                                    <span>&nbsp;</span> Download [<a href="documents/Academic_CV___Ruben.pdf">pdf</a>]
                                </p>
                            </div>
                        </div>
                        <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
                            <div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
                                <p> <iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
                                <p>Your web browser does not support iframes. Please click at the pdf link above. </p> </iframe> </p>
                            </div>
                        </div>
                    <section>
                </div>
            </div>

            <!-- Sidebar -->
            <div id="sidebar">
                <div class="inner">

                    <!-- Menu -->
                    <nav id="menu">
                        <header class="major">
                            <h2>Menu</h2>
                        </header>
                        <ul>
                            <li><a href="index.html">Homepage</a></li>
                            <li><a href="research.html">Research</a></li>
                            <li><a href="cv.html">Curriculum</a></li>
                            <li><a href="teaching.html">Teaching</a></li>
                            <li><a href="contacts.html">Contacts</a></li>
                            <li><a href="referees.html">Referees</a></li>
                            <!--<li>
                                <span class="opener">Submenu</span>
                                <ul>
                                    <li><a href="#">Lorem Dolor</a></li>
                                    <li><a href="#">Ipsum Adipiscing</a></li>
                                    <li><a href="#">Tempus Magna</a></li>
                                    <li><a href="#">Feugiat Veroeros</a></li>
                                </ul>
                            </li> -->
                        </ul>
                    </nav>

                    <section>
                        <header class="major">
                            <h2>Contact</h2>
                        </header>
                        <p>Please, contact me with any question, specially those regarding my reseach. Your feedback will be much apreciated</p>
                        <ul class="contact">
                            <li class="icon solid fa-envelope"><a href="rubenprzsnz@gmail.com">rubenprzsnz@gmail.com</a></li>
                            <!-- <li class="icon solid fa-phone">(000) 000-0000</li> -->
                            <li class="icon solid fa-building">
                            Departament d'Economia<br />
                            Edifici B<br />
                            Universitat Autònoma de Barcelona<br />
                            08193 Bellaterra, Barcelona, Spain</li>
                        </ul>
                    </section>

                    <!-- Footer -->
                    <footer id="footer">
                        <p class="copyright">&copy; Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
                    </footer>
                </div>
            </div>
        </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>

Answer 1

将 iframe 内联样式中的高度更改为 vh（视口高度）而不是 %。我使用开发工具将高度更改为 1000vh，它几乎填满了整个屏幕。这不是理想的解决方法，但它确实有效。

<iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">

<!------Change height to vh------>

<iframe width="75%" height="500vh" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">

使 iframe 更高

Make an iframe heigher

html

iframe

division