• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 709
  • Last Modified:

iFrame CSS height as percent parameters in IE


Hello Experts,

I'm working with I frames for the first time.  Is there a way to make the css style height:100% work with IE?  It works fine with Chrome and I assume with Firefox.  In IE the height parameter is ignored and the content displays short with scroll bars.

Any ideas on how to get around this without having to use a height in pixels.  The content in the ifraBody will change whenever a navbutton is pressed.

Thanks
<style type="text/css">

.container {
	background-color:#D9CB78;
	border:none;	
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
}

.header {
	background-color:#D9CB78;
	border:none;	
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
}

.sidebar1 {
	background-color:#D9CB78;
	border:none;	
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
}

.content {
	background-color:#D9CB78;
	border:none;	
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;

}

.footer {
	background-color:#D9CB78;
	border:none;	
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
}

#ifraHeader {
	height: 205px;
	width: 920px;
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
	background-color:#D9CB78;
	border:none;

}
#ifraNav {

	float:left;
	/* height:1000px; */
	height:100%;
	width: 220px;
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,3px;
	overflow:auto;
	background-color:#D9CB78;
	border:none;

	}
#ifraBody {
	float:right;
	width:700px;
	/* height:1000px; */ 
	height:100%; 
	padding:0px, 0px, 0px, 0px;
	margin:0px,0px,0px,0px;
	overflow:auto;
	color:#673723;
	background-color:#D9CB78;
	border:none;

}
</style>


</head>

<body bgcolor="#D9CB78">

<div class="container">
  <div class="header">
  <iframe id="ifraHeader" frameborder="0" name="ifraHeader" src="mainHeader.htm"></iframe>
  <hr />
  </div>
    
  <div class="sidebar1">
    <iframe id="ifraNav" frameborder="0" name="ifraNav" src="mainNavbar.htm"></iframe>
    <!-- end .sidebar1 -->
<br />
  </div>
    
  <div class="content">
  
      <iframe id="ifraBody" frameborder="0" name="ifraBody" src="welcome.htm"></iframe>

  <!-- end .content --></div>
    
  <div class="footer">
    <p>&nbsp;</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Open in new window

0
Waterstone
Asked:
Waterstone
1 Solution
 
armchangCommented:
Hi,

There's a few reasons leading to this situation. First, you might need to put <iframe> out of <div> tags at it would limit it's height also. Second, you might need to use position:absolute; if you want to use <div> as height:100%; will work correctly in it and you also have to remove the float in it and replace with the top and left to reposition it correctly like this:

<style type="text/css">
#ifraNav {
position:absolute;
height:100%;
width: 220px;
padding:0px, 0px, 0px, 0px;
margin:0px,0px,0px,3px;
overflow:auto;
background-color:#D9CB78;
border:none;

}
#ifraBody {
position:absolute;
left:250px;
width:600px;
height:100%; 
padding:0px, 0px, 0px, 0px;
margin:0px,0px,0px,0px;
overflow:auto;
color:#673723;
background-color:#D9CB78;
border:none;
}
</style>

Open in new window


How'd it went?
0
 
WaterstoneAuthor Commented:
Thank you. Works well.  Now on to the next inter-browser issue :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now