Solved

IFRAME height 100% to fit when the Browser Window is resized

Posted on 2011-03-01
10
945 Views
Last Modified: 2012-06-27
Hi, I have a page that contains html iframe.
when the browser window size is enlarged
I'd like also the iframe hight to fit the available space.
setting height property (also in css) to 100% doesn't seem to help.
Is this the big difference between iframes and the traditional FRAMEs?
i.e. can it be done WITHOUT javascript code?
Thanks, Aryeh.
0
Comment
Question by:tuchfeld
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
10 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35013231
Yes it can be done without javascript.  There is an important rule when it comes to using % measurements for height.  You may need to read this a couple times to make sense:

EVERY parent element of the iframe MUST have a height set in order for the % measurement to work.

So lets take the following basic page:

<html>
<body>
  <div id="wrapper">
    <iframe src="some-page.html" />
  </div>
</body>
</html>

Open in new window


You would need to set the height on the HTML, BODY, and DIV in order for the iframe to size itself correctly.

html, body {
  height: 100%;
}

/* for IE6 */
* html #wrapper {
  height: 100%;
}

#wrapper {
  min-height: 100%;
}

#wrapper iframe {
  width: 100%;
  height: 100%;
}

Open in new window

0
 

Author Comment

by:tuchfeld
ID: 35013568
Can I have nested (more than one) min-height in the html hierarchy?
I cannot seem to make it work in my case as you instructed.
0
 

Author Comment

by:tuchfeld
ID: 35013599
say I have "a footer div" that I want to stratch to the bottom of the window.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:tuchfeld
ID: 35014283
here is a sample html code that doesn't work as expected..
the div class="content" should fit it's height to the available space between the header and the footer (which are fixed height).
can you fix it?
<HTML>
<HEAD>
<STYLE media="all" type="text/css">
html, body {
  height: 100%;
}
#wrapper
{   
  min-height: 100%;
  background-color: red;
}
.header
{
  height: 100px;
  background-color: yellow;
}
.content
{
  height: 100%; /* try 200px */
  background-color: blue;
  overflow: hidden;
}
.footer
{
  height: 100px;
  background-color: red;
}
</STYLE>
</HEAD>
<BODY>
  <DIV id="wrapper">
    <DIV class="header">
    </DIV>
    <DIV class="content">
      1<BR />
      2<BR />
      3<BR />
      4<BR />
      5<BR />
      6<BR />
      7<BR />
      8<BR />
      9<BR />
      10<BR />
      1<BR />
      2<BR />
      3<BR />
      4<BR />
      5<BR />
      6<BR />
      7<BR />
      8<BR />
      9<BR />
      10<BR />
      1<BR />
      2<BR />
      3<BR />
      4<BR />
      5<BR />
      6<BR />
      7<BR />
      8<BR />
      9<BR />
      10<BR />
    </DIV>
    <DIV class="footer">
    </DIV>
  </DIV>
</BODY>
</HTML>

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35017757
Try this.  I should have just given you this instead of hand-typing my last comment.  This is from my 100% height boiler-plate.  I added the footer for you to use.  This has been tested in IE7+, Chrome, FF, Opera.

The magic key was the "position: relative" on the outer div.  Also, any time you work with html be sure to use a proper DOCTYPE... this tells the browser how to render the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>100% Height</title>
<style type="text/css">
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	background-color: #99F;
}
#content {
	padding: .5em;	
}
#footer {
	background-color: #0F9;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
</head>

<body>
<div id="container">
    <div id="content">
    	<p>Some Text</p>
    </div>
    <div id="footer">This is the footer</div>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:tuchfeld
ID: 35021915
thanks. but yet the content part is not stratched to to the footer.
it should be as high as bossible until the footer border.
try puting the folowing code instead of "Some Text" in your example.


<IFRAME id="content" class="content" height='100%' src="http://www.google.com" width='100%'></IFRAME>

Open in new window

0
 

Author Comment

by:tuchfeld
ID: 35021975
sorry, ignore class="content" inside the iframe
you should see that it is not stratched to the footer.
0
 

Author Comment

by:tuchfeld
ID: 35022031
here is the code that I'm testing on
please edit it if you can.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <META content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <TITLE>100% Height</TITLE>
  <STYLE type="text/css">
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	background-color: #99F;
}
.header
{
  height: 100px;
  background-color: yellow;
}
.content {
  padding: .5em;	
  background-color: blue;
}
.footer {
	background-color: #0F9;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
</STYLE>
</HEAD>
<BODY>
  <DIV class="wrapper">
    <DIV class="header"></DIV>
    <DIV class="content"><IFRAME height='100%' src="http://www.google.com" width='100%'></IFRAME></DIV>
    <DIV class="footer">This is the footer</DIV>
  </DIV>
</BODY>
</HTML>

Open in new window

0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 35022810
So are you experienced with CSS?  Because there is no one-size-fits-all when it comes to 100% height websites.  They are actually one of the more complex ways to style a site, and a solid knowledge of CSS is required to execute this.  Usually, you end up having to write some javascript to get things to work the way you want.  I can help point you in the right direction, but I cannot build your site for you... unless you want to hire me ;)

That being said, attached is what I got so far.  It works in IE7 (with hack), IE8, Chrome, Firefox, and Opera.  Opera, however, does not resize itself when the user resizes the window... you will need javascript to help Opera resize itself accordingly.  At this point it is my responsibility to push you out of the nest to figure it out on your own.  I will give you 2 good pointers.

1) Don't use <UPPERCASE> tags... all lowercase
2) Any time you add padding to an element it will increase it's height and width.  For example, if an element has the following CSS:

width: 50px;
height: 100px;
padding: 10px;

Then the overall width will be 70px and the height 120px (padding is on all 4 sides, so gets added twice).  I highly suggest you take some tutorials on beginning with CSS and the "box model" (google it).

Cheers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>100% Height</title>
  <style type="text/css">
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#wrapper {
	height: 100%;
	position: relative;
	background-color: #FFF;
}
#header {
	height: 100px;
	background-color: yellow;
}
#content {
	position: absolute;
	top: 100px; /* match header height */
	bottom: 30px; /* match footer height */
	
	/* IE6 & IE7 only - move to separate stylesheet */
	*height: expression( (document.body.clientHeight - 100 - 30) + "px");
	
	right: 0;
	left: 0;
    background-color: blue;
}
#footer {
	height: 30px;
	background-color: #0F9;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="header">This is the header</div>
    <div id="content">
   	  <iframe src="http://www.simplewebsite.org" style="width:100%; height:100%" scrolling="auto"></iframe>
    </div>
    <div id="footer">This is the footer</div>
  </div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:tuchfeld
ID: 35023666
Thanks,
I wish I could hire you... ;-)
Cheers.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question