Solved

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

Posted on 2011-03-01
10
909 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now