stackoom
  简体   繁体   中英

Responsive iFrame height across all screen sizes

 原文  2018-11-02 04:32:01  7   1    html/ css/ iframe

Question

In my code, I have two iFrames both with responsive widths. How can I get both iFrames to have set heights like I have in my code but for the height to adjust accordingly to the screen size. For example, the heights now fit perfectly to a 12" MacBook. I would like the iFrames to adjust the height across all screen resolutions but for the iFrame height to stop before the footer with the excess content in the iFrames to scroll.

Code: 

 body { /* General Body Properties */ font-family: Trebuchet MS, Georgia, Helvetica, sans-serif; margin: 0; overflow: hidden; } * { /* Key element to aligning <divs> (DO NOT REMOVE) */ box-sizing: border-box; } #wrapper { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0 } .header { /* Header properties featuring myEd and school emblems */ padding: 30px; text-align: center; /* Aligns links in the navBar */ background-image: url(/Default/Img/backgroundHeader-4K.jpg); background-size: cover; background-repeat: no-repeat; } .myEd-reverse { width: 240px; height: 70px; float: left; margin-left: -60px; margin-top: -40px; } .navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */ overflow: hidden; background-color: #333; position: sticky; position: -webkit-sticky; top: 0; } .navBar a { /* Style the navBar links */ float: left; display: block; color: #fff; text-align: center; padding: 6px 12px; text-decoration: none; } .navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */ float: right; } .navBar a:hover { /* Change color on hover */ background-color: #ddd; color: #000; } .navBar a.active { /* Active Link */ background-color: #666; color: #fff; } .row { /* Alignment between sideBar and main */ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sideBar { /* sideBar alignment properties */ -ms-flex: 20%; flex: 20%; background-color: #a7a7a7; padding: 0px; height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */ overflow-y: scroll; /* Allows myEd news to scroll */ overflow: hidden; } .profilePanel { /* Panel properties */ background-color: #585858; width: 100%; padding: 0px; } #newsmyEd { width: 100%; height: 9.4%; top: 0; right: 0; } .main { /* Main Column */ -ms-flex: 80%; flex: 80%; background-color: #a7a7a7; padding: 0px; height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */ overflow-y: scroll; /* Allows embedded iFrame to scroll */ position: relative; overflow: hidden; } .frameMain { /* Frame Properties */ position: absolute; top: 0; left: 0; border: 0; } .footer { /* Footer properties */ position: fixed; bottom: 0; left: 0; right: 0; background-color: #333; } .footer a { /* Footer navBar properties */ float: right; display: block; color: #fff; text-align: center; padding: 6px 12px; text-decoration: none; } .footer a:hover { /* Change color on hover */ background-color: #ddd; color: #000; } .footer a.active { /* Active Link */ background-color: #666; color: #fff; } @media screen and (max-width: 700px) { /* Responsive Layout - If screen px is less than 700px, make sideBar and main stack on top of each other */ .row { flex-direction: column; } } @media screen and (max-width: 400px) { /* Responsive Layout - If screen px is less than 400px, make navBar links stack vertically on top of each other */ .navBar a { float: none; width: 100%; } } 
 <!DOCTYPE HTML> <html lang="en"> <head> <title>Welcome | myEd</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png"> </head> <body> <script> // Required scripts for certain activities on myEd, each entry will be noted for understanding </script> <div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions --> <div class="header"> <!-- Header featuring 4K Background, myEd and school emblems --> <img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software --> </div> <div class="navBar"> <!-- Main sticky navBar with categories listed --> <a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home --> <a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning --> <a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management --> <a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals --> <a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) --> <a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) --> <a href="#" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) --> </div> <div class="row"> <!-- Format for alignment of the sideBar and main panels --> <div class="main"> <!-- Main learning or collaborative workspace --> <iframe class="frameMain" width="100%" height="11.4%" scrolling="yes" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame --> </div> <div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory --> <div class="profilePanel" style="height: 100px"></div> <!-- Dark grey panel where student info iFrame will lay --> <iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News --> </div> </div> <div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links --> <a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News --> <a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation --> </div> </div> </body> </html>

Thanks for your assistance. Tom

1 answers

solution1
 0 ACCPTED  2018-11-02 04:53:46

Try using min-height:some_value ; for both the iframes

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to stretch iFrame height to all screen sizes How to make website with iframe responsive to screen sizes Need to iframe to all screen sizes Making a website responsive for all screen sizes How to make video responsive for all the screen sizes? Boostrap fixed height cols at all screen sizes Customize CSS to make div/iframe responsive full screen height How to maintain SVG's wave shape across all screen sizes Responsive iframe not full height <iframe> Height responsive
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM