Solved

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

Posted on 2011-03-01
10
918 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html Uncheck Checkbox 2 25
HTML Anchor Link Problem 3 39
convert Systemjs to Webpack 3 37
Selected in an option list 13 21
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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

820 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