CODEWITHSUNDEEP
csshtmliframeheight
Karl
Karl

Reputation: 345

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

Upvotes: 8

Views: 10062

Answers (3)

Danny Omega
Danny Omega

Reputation: 11

I seem to be be able to resize my iframe within a div tag and just add height and width. When I wasn't able to is wasn't !Doctype it was the tables I had and other issues with mislabeled div tags or other slight errors.

<div><iframe src="demo_iframe.htm" style="border:none" width="1050"
height="345" name="content"></iframe></div>

Upvotes: 0

Alohci
Alohci

Reputation: 82986

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/

Upvotes: 3

ctwheels
ctwheels

Reputation: 22817

I made this, not sure if it's what you want:http://jsfiddle.net/ctwheels/62mbP/

HTML

<body onresize="myFunction()">
<div class="header_bar" id="header_bar">
    <div class="tab_active" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com'">HOME</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/html/html_intro.asp'">HTML</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/js/js_intro.asp'">JS</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/sql/sql_intro.asp'">SQL</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/php/php_intro.asp'">PHP</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/xml/xml_whatis.asp'">XML</div>
</div>
<div id="iframe_and_div_container">
    <div class="iframe_container">
        <iframe id="main_iframe" class="main_iframe" frameborder="0" src="http://www.w3schools.com"></iframe>
    </div>
</div>

CSS

  body {
    overflow:hidden;
}
#iframe_and_div_container {
    position:relative;
    height:400px;
    width:800px;
}
.iframe_container {
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
}
.main_iframe {
    width: 100%;
    height: 100%;
}
.header_bar {
    position:fixed;
    width: 100%;
    height: 40px;
    background-color:grey;
    display:block;
    overflow:hidden;
    z-index:1000;
}
.tab_inactive, .tab_active {
    float: left;
    width:70px;
    padding:5px;
    margin:2px;
    border:2px solid grey;
    background-color:white;
    box-shadow:2px 2px #333333;
    text-align:center;
}

JS

var height = window.innerHeight;
var width = document.body.offsetWidth + 8;
var heightOfTabs = document.getElementById("header_bar").clientHeight;
var newHeight = height - heightOfTabs - 8;
document.getElementById("iframe_and_div_container").style.height = newHeight + "px";
document.getElementById("iframe_and_div_container").style.top = heightOfTabs + "px";
document.getElementById("iframe_and_div_container").style.width = width + "px";

Note that the "+ 8" is for vertical scrollbar width/horizontal scrollbar height in google chrome.

Create a function that gets scrollbar height/width values of iframe (if possible, I don't believe this is possible). If not, use a function to determine the browser being used (http://www.quirksmode.org/js/detect.html) and create a switch statement with the browsers (and versions if you want to be very thorough) and set a scroll variable to replace the 8 in my function

Upvotes: 0

Related Questions