?
Solved

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

Posted on 2011-03-01
10
Medium Priority
?
990 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 2000 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

Independent Software Vendors: 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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

719 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