20

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>
Daniel Cheung
  • 4,779
  • 1
  • 30
  • 63
zeddex
  • 1,260
  • 5
  • 21
  • 38

8 Answers8

24

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>
Marty
  • 582
  • 4
  • 17
  • 2
    No, that's not doing what you think it is. It only appears to work because you are using the full-size `col-md-12` class. If you used `col-md-6` instead you would see your iframe still takes up the full screen, regardless of what column size it is contained in. – Chris Warth Nov 03 '16 at 21:54
  • 3
    "width: 100%; height: 80vh;" works perfectly for me. – Wayne Liu Oct 11 '17 at 07:05
12

I had the issue about iframe not accepting 100% height. See this thread.

The solution is to use style="position:absolute;" on the iframe.

Community
  • 1
  • 1
allwynmasc
  • 393
  • 5
  • 18
  • 2
    If i change it to: it still does not work :( – zeddex Oct 18 '14 at 05:12
  • maybe its the `;` at end, try removing it: `` – allwynmasc Oct 18 '14 at 05:15
  • Instead of height and width, use top, bottom, left, and right all equal to 0 with absolute position. Oh and make sure the parent container has either position of relative or absolute as well. – trnelson Oct 18 '14 at 05:16
  • 1
    Still not working it's in a
    and then the iframes in
    – zeddex Oct 18 '14 at 05:22
  • I think it's to do with the bootstrap column code which is why i posted this as bootstrap. Any ideas whether the bootstrap code is stopping it from working? – zeddex Oct 18 '14 at 05:25
  • i don't know if it's a bootstrap thing but `;` anywhere will cause errors, like i see one after `src` now! – allwynmasc Oct 18 '14 at 05:25
  • I don't think it's to do with ; but i am guessing the column setup or i might even need to do a css overwrite since there is a lot of css in bootstrap which might not let the suggestions work correctly. Any ideas on the bootstrap code? – zeddex Oct 18 '14 at 05:31
  • 6
    This does not work. @zeddex, why have you checked it as the accepted answer? Is there something else you did to make it work for you? – Ulysses Alves Feb 17 '16 at 12:56
5

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>
Caio Vianna Lima Netto
  • 131
  • 6
  • Thanks, if possible i would like to avoid the use of javascript though. – zeddex Oct 18 '14 at 05:12
  • lol I don't have enough rep to comment on the position:absolute ... anyway, won't work, changing an element to absolute position does nothing to it's size, quite the contrary, it stops depending on the height of the container – Caio Vianna Lima Netto Oct 18 '14 at 05:24
  • I just tried the js code, put the iframe in a div with the id to select and it does not work. I think it's down to the bootstrap code. – zeddex Oct 18 '14 at 05:26
  • you have some issues on the code, the div with the iframe is outside the row for starter. Also, the iframe have a border, which might break the bootstrap. And then ... my code worked just fine, changed my answer – Caio Vianna Lima Netto Oct 18 '14 at 05:46
  • @CaioViannaLimaNetto that `position:absolute` did work for me on the browser as well in my cordova app! – allwynmasc Oct 18 '14 at 07:09
4

The bootstrap 5 solution is

<div class="ratio ratio-16x9">
 <iframe... [your iframe, no height/width set]> </iframe>
</div>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Aerodyno
  • 471
  • 3
  • 12
  • That just made it into a production asset today and worked like a charm! Used the ```ratio-4x3``` for our use-case... – Techmag Oct 12 '21 at 22:08
2

This might help someone - This is on BS 3.3.7


    <div class="embed-responsive embed-responsive-16by9">
       <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
Tribe
  • 123
  • 1
  • 6
0

After my adjustments i found the solution by setting the padding to 0px and that has seemed to fix everything. Thanks everyone for your answers. :D

zeddex
  • 1,260
  • 5
  • 21
  • 38
  • so the `position:absolute` worked? I forgot to mention this padding point, thing is jquery mobile adds padding automatically which i had to remove. – allwynmasc Oct 18 '14 at 07:08
  • so finally after trying without the padding, it's go nothing to do with iframe height! It's just the surrounding padding. – allwynmasc Oct 18 '14 at 07:14
0

I have tried to solve a similar issue too (I am currently on Bootstrap 4). My layout has a <div> on top, which contains controls, and an <iframe> on the bottom for the content, which has to fill up the remaining height of the page (with scrollbars if needed). I have added the sidebar here to reproduce the original question.

I solved it using calc() and vh units:

CSS:

   <style>
        #toolbarContainer { margin-bottom:6px; }
        #myIframe { width:100%; border: 1px solid #0094ff; border-radius:3px; }
    </style>

HTML:

<body>
    <div class="container-fluid">
        <div id="toolbarContainer">        
            <div class="row"> [content here]</div>
            <div class="row"> [more content here]</div>
        </div>
        <div class="row">
            <div class="col-3 col-md-2" id="sidebar">
                <div class="alert alert-info">Sidebar content here</div>
            </div>
            <div class="col-9 col-md-10">
                <iframe id="myIframe" src="about:blank"></iframe>
            </div>
         </div>
    </div>
</body>

JAVASCRIPT (put it before the </body> closing tag):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        document.getElementById('myIframe').style.height = 'calc(100vh - ' + ($('#myIframe').offset().top + 25) + 'px)';            
    });
</script>

I tested this in Chrome, IE11, Edge and Firefox, and works a charm, with correct handling of the browser window resizes, including . I don't know why I had to add the constant +25 to the calc, it just works. By slightly changing that number you can increase/decrease the white margin below the iframe.

You can probably get rid of jQuery easily, if you want, using the body OnLoad() handler and a pure javascript expression to get the .top coordinate of the iframe.

No javascript solution

If you know for sure the height of your top bar, you can completely get rid of the javascript, using this css with the same HTML as above:

<style>
    #divFrameContainer { margin-bottom:6px; }
    #ifrBtLingua { height: calc(100vh - 100px); width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px;  }
</style>

(replace the 100px with the appropriate height)

davidthegrey
  • 1,205
  • 2
  • 14
  • 23
0

I've done the following with Bootstrap 4

    <iframe class="position-absolute w-100 h-100 border-0" src="https://foo.bar"></iframe>

It's the simplest solution I can think of and it's "pure" Bootstrap.

postfixNotation
  • 181
  • 1
  • 5