Solved

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

Posted on 2011-03-01
10
885 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
 

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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

744 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

11 Experts available now in Live!

Get 1:1 Help Now