Adjust the height of the iFrame according to the screen resolution
0
I have two iFrames in every page of my HTML site at the moment. I would like the height of the iFrames to adjust according to the screen size. I would like the bottom of the iFrames to follow down to the bottom of screen (above the .footer) to ensure the site is rendered across all screen resolutions and the iFrame heights fill the remainder of the screen.
I have tried to set the position of .main and .sideBar to relative and made the iFrame position to absolute with the height and widths of the frames to 100% but that does not still seem to work. I really need help with finding a solution to this issue.
You can see that using fixed min-heights 11.4% in my CSS code for .frameMain and #newsmyEd it fits the screen of my 12" computer perfectly. The iFrames are contained in .main and .sideBar which I have set a fixed height of 5000px. You can see though when the site is displayed on a different resolution, the iFrames are shortened and do not follow down to the bottom above the .footbar like I would like to achieve.
Attached is my code:
/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks for your help.
Tom
html css iframe
asked Nov 19 '18 at 7:09
user10341225user10341225
456
add a comment |
0
I have two iFrames in every page of my HTML site at the moment. I would like the height of the iFrames to adjust according to the screen size. I would like the bottom of the iFrames to follow down to the bottom of screen (above the .footer) to ensure the site is rendered across all screen resolutions and the iFrame heights fill the remainder of the screen.
I have tried to set the position of .main and .sideBar to relative and made the iFrame position to absolute with the height and widths of the frames to 100% but that does not still seem to work. I really need help with finding a solution to this issue.
You can see that using fixed min-heights 11.4% in my CSS code for .frameMain and #newsmyEd it fits the screen of my 12" computer perfectly. The iFrames are contained in .main and .sideBar which I have set a fixed height of 5000px. You can see though when the site is displayed on a different resolution, the iFrames are shortened and do not follow down to the bottom above the .footbar like I would like to achieve.
Attached is my code:
/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks for your help.
Tom
html css iframe
asked Nov 19 '18 at 7:09
user10341225user10341225
456
add a comment |
0
0
0
I have two iFrames in every page of my HTML site at the moment. I would like the height of the iFrames to adjust according to the screen size. I would like the bottom of the iFrames to follow down to the bottom of screen (above the .footer) to ensure the site is rendered across all screen resolutions and the iFrame heights fill the remainder of the screen.
I have tried to set the position of .main and .sideBar to relative and made the iFrame position to absolute with the height and widths of the frames to 100% but that does not still seem to work. I really need help with finding a solution to this issue.
You can see that using fixed min-heights 11.4% in my CSS code for .frameMain and #newsmyEd it fits the screen of my 12" computer perfectly. The iFrames are contained in .main and .sideBar which I have set a fixed height of 5000px. You can see though when the site is displayed on a different resolution, the iFrames are shortened and do not follow down to the bottom above the .footbar like I would like to achieve.
Attached is my code:
/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks for your help.
Tom
html css iframe
asked Nov 19 '18 at 7:09
user10341225user10341225
456
I have two iFrames in every page of my HTML site at the moment. I would like the height of the iFrames to adjust according to the screen size. I would like the bottom of the iFrames to follow down to the bottom of screen (above the .footer) to ensure the site is rendered across all screen resolutions and the iFrame heights fill the remainder of the screen.
I have tried to set the position of .main and .sideBar to relative and made the iFrame position to absolute with the height and widths of the frames to 100% but that does not still seem to work. I really need help with finding a solution to this issue.
You can see that using fixed min-heights 11.4% in my CSS code for .frameMain and #newsmyEd it fits the screen of my 12" computer perfectly. The iFrames are contained in .main and .sideBar which I have set a fixed height of 5000px. You can see though when the site is displayed on a different resolution, the iFrames are shortened and do not follow down to the bottom above the .footbar like I would like to achieve.
Attached is my code:
/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks for your help.
Tom
/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>/* Copyright (c) myEd (made by students, for students.) 2018. */
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;
z-index: 100000;
}
.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;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.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;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.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;
min-height: 11.4%;
}
.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>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Timetable | 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/Timetable/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="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</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/Timetable/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<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/Timetable/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>html css iframe
html css iframe
asked Nov 19 '18 at 7:09
user10341225user10341225
456
asked Nov 19 '18 at 7:09
user10341225user10341225
456
asked Nov 19 '18 at 7:09
user10341225user10341225
456
asked Nov 19 '18 at 7:09
user10341225user10341225
456
asked Nov 19 '18 at 7:09
user10341225user10341225
456
456
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You can set iframe height using calc, something like:
iframe{
height: calc(100vh - 250px); // 250px is height of header and footer combined
}
in this way you can set your iframe full height-ed despite changing screen resolution.
Demo: https://codepen.io/eirenaios/pen/OaxvEB
*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369834%2fadjust-the-height-of-the-iframe-according-to-the-screen-resolution%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can set iframe height using calc, something like:
iframe{
height: calc(100vh - 250px); // 250px is height of header and footer combined
}
in this way you can set your iframe full height-ed despite changing screen resolution.
Demo: https://codepen.io/eirenaios/pen/OaxvEB
*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
add a comment |
1
You can set iframe height using calc, something like:
iframe{
height: calc(100vh - 250px); // 250px is height of header and footer combined
}
in this way you can set your iframe full height-ed despite changing screen resolution.
Demo: https://codepen.io/eirenaios/pen/OaxvEB
*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
add a comment |
1
1
1
You can set iframe height using calc, something like:
iframe{
height: calc(100vh - 250px); // 250px is height of header and footer combined
}
in this way you can set your iframe full height-ed despite changing screen resolution.
Demo: https://codepen.io/eirenaios/pen/OaxvEB
*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
You can set iframe height using calc, something like:
iframe{
height: calc(100vh - 250px); // 250px is height of header and footer combined
}
in this way you can set your iframe full height-ed despite changing screen resolution.
Demo: https://codepen.io/eirenaios/pen/OaxvEB
*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>*{
margin: 0;
padding: 0;
}
header,footer,main{
display: block;
clear:both;
background:#eee;
}
iframe{
float: left;
height:calc(100vh - 50px)
}
.first-iframe{
width:69%;
}
.second-iframe{
width:29%;
}<header>
<h2>Header</h2>
</header>
<main>
<iframe class="first-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe class="second-iframe" src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</main>
<footer>
<h5>footer</h5>
</footer>answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
edited Nov 19 '18 at 7:55
answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
answered Nov 19 '18 at 7:46
eirenaioseirenaios
10.4k134976
10.4k134976
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369834%2fadjust-the-height-of-the-iframe-according-to-the-screen-resolution%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
