Bootstrap 3 - Fill an area with an Iframe 100%
100% height means 100% of the available height. Since there is nothing going on, that is just enough for the iframe to show.
You need to force something to open up the container of said iframe to have all the available height of the page, so that 100% height will do what you want, fill all of that space.
This is an annoying issue =p
I often solve with javascript, capturing the viewport height and manually setting the container height to the necessary height. Just be careful not to set it more, or you will get a side scrollbar since it will overflow. If you want to try, here is the function I use to get the window (viewport) sizes. Here is your HTML (I removed stuff to make it smaller, but I tested it full)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- links might vary, my folder is different. Also, adding these at the end for "speed" is bs, it often causes scripts to fail -->
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="">Overview</a></li>
<li><a href="">Reports</a></li>
<!-- ... -->
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<!-- note: you should not add the offsets, removed them. Also note this is inside the row, your original wasan't -->
<iframe id="iframeid" src="http://www.google.com" style="width:100%; height:100%;margin:0px;border:0px"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function windowDimensions() { // prototype/jQuery compatible
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE or IE 9+ non-quirks
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 5- (lol) compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
if (myWidth < 1) myWidth = screen.width; // emergency fallback to prevent division by zero
if (myHeight < 1) myHeight = screen.height;
return [myWidth,myHeight];
}
var dim = windowDimensions();
myIframe = $('#iframeid'); // changed the code to use jQuery
myIframe.height((dim[1]) + "px");
</script>
</body>
</html>
I had the issue about iframe not accepting 100% height. See this thread.
The solution is to use style="position:absolute;" on the iframe.
The bootstrap 5 solution is
<div class="ratio ratio-16x9">
<iframe... [your iframe, no height/width set]> </iframe>
</div>
For what it is worth, this worked for me
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<iframe style="width: 100vw;height: 100vh;position: relative;" src="https://example.com" frameborder="0" allowfullscreen></iframe>
</div>
</div>