Menu
I am in need of doing the following:
Can any one help?
Things I cannot use:
Position:Fixed;(mainly due to a script that i am using for the sideslidebars
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bus Management System</title>
<!-- Viewport meta tag to prevent iPhone from scaling our page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
</head>
<style type="text/css" media="all">
html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
body {border:4px solid green;}
iframe {border:6px solid red;width:100%; height:100%;display:block;}
#wrapper {border:2px solid blue; width:100%; height:100%;}
</style>
<body>
<div style="height:50px; background-color:#000; color:#fff;">Header</div>
<iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>
</body>
</html>
329
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
The height & width of the iframe has to be set to 100% without scroll, except for the scroll that comes for the body when the content is loaded and the size of the content is more. The content of the iframe is another HTML page from the same domain. The iframe also needs to scale according to the responsive HTML page.
The height attribute specifies the height of an <iframe> , in pixels. The default height is 150 pixels.
Using the window. postMessage() method, we can safely communicate between the iframe and the parent window. That way, we can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.
CSS only solution for 100% width and height and responsive
HTML
<div class="container">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
html,body {
height:100%;
}
.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
DEMO
without position : absolute
css
html,body {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
height: 100%;
}
DEMO 2
And finally here is the crack
Modern browsers now support the:
width: calc(100% - 70px);
CSS
html,body {
height:100%;
margin-top:0;
margin-bottom:0;
}
.h_iframe iframe {
width:100%;
height:calc(100% - 75px);
}
.h_iframe {
height: 100%;
}
.element{
width:100%;
height:70px;
background:red;
}
HTML
<div class="container">
<div class="element">here it goes</div>
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Final DEMO
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
