Menu
I am modifying the Dashboard example and trying to fill an area of the page fully with an iframe so it stretches to the edge but i am having trouble doing so.
Basically i have the nav, sidebar and i want to fully fill the page area with an iframe but it creates a margin horizontally and does not stretch the iframe vertically.
Does anyone know how i can fill the full area? If the page is downsized it needs to work in a responsive view also if possible.
Edit: The problem is something related to bootstrap i think, perhaps i need to overwrite some CSS or change the column setup?
Edit 2: Ok I have sort of answered my question and now after adding a new css rule and adjusting the bootstrap code a bit have it stretching a full area however there is a slight margin/border that i now need to get rid of, if i use absolute it makes the iframe go off the page to the right rather than going right to the edge, any ideas on how i can use the full area? Im kinda new to Bootstrap so i probably just need to make a slight adjustment or something.
My current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="resources/favicon.ico">
<title>Website</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
<style type="text/css">
body,html,.main-display-area,.col-md-10 {
height:100%;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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="">Analytics</a></li>
<li><a href="">Export</a></li>
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
</div>
<div id="frame" class="col-md-10 col-md-offset-2 main">
<iframe src="http://www.w3schools.com" id="frame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
997
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).
To get the iframe to properly use 100% the parent needs to be 100%. In newer doctypes the html and body tag are not automatically 100%. When I added height:100% for html and body then it worked flawlessly.
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100% Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
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>
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
