Search code examples
csshtmliframeheight

HTML5 iFrame is only 150px in height

Basically what I'm trying to do is have a single, thin toolbar across the top of my page with a row of various DIV containers working as buttons. I want these buttons to update the content of an iframe below the toolbar. The problem is that my iframe below the toolbar is only 150px in height. Specifically this occurs when I specifiy <!DOCTYPE html>, but when I do not specify this HTML5 doctype it works fine.

I read up on this a bit and it looks like the reason is that HTML5 no longer covers percentages to be able to set the width and height of an iFrame. However now I'm stuck because I can't get the iFrame to grow to 100% of the remaining height of the window under the toolbar. I've even created an iframe_container DIV and put the iframe in that, with the iframe_container being at height=%100 but I'm still not able to get it working correctly.

HTML:

<!DOCTYPE html>
<html>
<body>
<div class="header_bar">
  <div class="tab_active"   onclick="location.href='...'">Tab1</div>
  <div class="tab_inactive" onclick="location.href='...'">Tab2</div>
  <div class="tab_inactive" onclick="location.href='...'">Tab3</div>
</div>

<div class="iframe_container">
  <iframe id="main_iframe" class="main_iframe" frameborder="0" src="...">
  </iframe>
</div>
</body>
</html>

CSS:

.iframe_container {
  width: 100%;
  height: 100%;
}

.main_iframe {
  width: 100%;
  height: 100%;
}

.header_bar {
  float: none;
  width: 100%;
  height: 30px;
}

.tab_inactive {
  float: left; 
}

.tab_active {
  float: left;   
}

I've tried the seamless attribute for iframes and it does not seem to be helping here either. The best option I've found so far is to add {position: absolute; top: 30px; bottom: 0px;} to my iframe_container class, which does fix the iframe size issue, however it introduces some very odd scrolling behavior including dual scrollbars on the right. Any ideas on how I can make sure my iframe fills up the bottom of the window and still stay HTML5 compliant? Thanks

Solution

  • Something like this, maybe?

    html { height:100% }
body { height:100%; width:100%; margin:0; display:table;}
.header_bar { display:table-row; }
.iframe_container { height:100%; display:table-cell; }
iframe { height:100%; width:100%; display:block; }

    http://jsfiddle.net/wMaKx/