Website Using Iframe and Divs - height 100% not working

**dmuir** · 09-21-2012, 04:49 AM

Website Using Iframe and Divs - height 100% not working

I am trying to recreate a table based website to divs and css but still maintaining an Iframe for the content area. I can not get the Iframe to fill the content area without giving a height in pixels rather than 100%.
If I use a height with pixels it does not show the bottom of the screen in some resolution or if adjusted cuts off before the bottom of the screen in higher resolutions.

Any help would be appreciated.

The website is http://www3.mbs.sd23.bc.ca/staff/dmu...sign/index.htm

HTML used:

HTML Code:

<!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" lang="en" xml:lang="en">
<head>
<title>MBSS Web Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mbss.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Page Wrap -->
<div id="page-wrap">

  	<!-- Header Graphic & Content Div -->
  	<div id="header">Content Area</div><!-- END Header -->
    
	<!-- TopNavbar -->
    <div id="topnav">
    	<ul>
        	<li>Keyboard Shortcuts</li>
            <li>|</li>
            <li><a href="webdesign_info/webdesign_info.htm" target="iframe">Web Design Info</a></li>
            <li>|</li>
            <li><a href="../employability_skills/employability_skills_2000.pdf" target="iframe">Employability Skills</a></li>
    	</ul>
	</div> 
    <!-- END TopNav --> 
     
  <!-- Side NavBar --> 
  <div style="clear: both;"></div>
  <div id="sidenav">
  			<a href="http://www.mbs.sd23.bc.ca/">MBSS Site</a><br /><br />
            <a href="../drafting/index.htm">Drafting Site</a><br />
            <a href="../animation/index.htm">Animation Site</a><br />
            <a href="../webdesign/index.htm">Web Design Site</a><br />
            -------------------<br />
            <a href="../internet_websites.htm" target="iframe">Websites</a><br />
            <a href="../internet_websites.htm" target="iframe">Post Secondary</a><br />
            -------------------<br />
            <a href="course_outline/outline_webdesign.htm" 
            target="iframe">Course Outline</a><br />
            <a href="../accessing_your_school_files/accessing_your_school_files.htm" 			
            target="iframe">Get Files@Home</a><br />
            -------------------<br />
            <br />
            Assignments<br />
            <br />
            LevelA<br />
            <a href="assignments/webdesign_a_term_1.htm" 
            target="iframe">----------- Term 1</a><br />
            <a href="assignments/webdesign_a_term_2.htm" 
            target="iframe">----------- Term 2</a><br /><br />
            Level B<br />
            <a href="assignments/webdesign_b_term_1.htm" 
            target="iframe">----------- Term 1</a><br />
            <a href="kss/webdesign11/2005/assignedwork.html" 
            target="iframe">----------- Term 2</a><br /><br />
            Level C<br />
            <a href="assignments/webdesign_c_term_1.htm" 
            target="iframe">----------- Term 1</a><br />
            <a href="kss/webdesign12/2005/assignedwork.htm" 
            target="iframe">----------- Term 2</a><br />
			<br /><br /><br /><br /><br /><br />
            <em>Graphic design by:<br />D. Pelletier<br />
            <a href="mailto:don.muir@sd23.bc.ca">email: d.muir</a></em>
  </div> <!-- END Side Navbar -->
  
  <!-- Iframe <div>-->
   <div id="iframe-wrap">
  	<iframe src="student_work.html" width="100%"   frameborder="0"  height="100%" scrolling="auto" name="iframe" ></iframe> 
   </div> <!-- END Iframe Wrapper--> 
  
</div><!-- END Page Wrap --> 
</body>

</html>

CSS used:

Code:

@charset "utf-8";
/* CSS Document */

/* Colours Used:
Drafting:
	Blue: Top Gradient / 069f40  Bottom Gradient - aad9bc
	Text - 069f40
	Link & Visited - 666
	Hover - ccc

Animation:
	Purple: Top Gradient / 92b1c1  Bottom Gradient - d4eaf6
	Text - 92b1c1
	Link & Visited - 666
	Hover - ccc

Web Design:
	Green: Top Gradient / 069f40  Bottom Gradient - aad9bc
	Text - 069f40
	Link & Visited - 666
	Hover - ccc
	
End Colours Used */

* {
	margin: 0;
	padding: 0;
}

html, body, iframe, page-wrap, iframe-wrap, header, topnav, sidenav {
	margin:0;
	padding:0;
	height:100%;
}

iframe {
	display:block;
	width:100%;
	border:none;
	background-image: url(images_mainpage/sideslice.jpg);
	padding-left: 180px;
	background-repeat: repeat-y;
	height: 750px;
}

body {
	background-color: #fff;
	background-image: url(images_mainpage/topslice.jpg);
	background-repeat: repeat-x;
	width: 100%;
	overflow: hidden;
}

#page-wrap   {
	width: 100%;
	font-size:10px;
	font-weight: bold;
	color: #069f40;
	font-family: Verdana, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
	min-width: 780px;
	max-width: 1260px;
	max-height: 1000px;
	min-height: 600px;
}	

a:link{
	color: #666;
	text-decoration: none;
}

a:visited{
	color: #666;
	text-decoration: none;
}

a:hover{
	color: #ccc;
}
#header {
	background-image: url(images_mainpage/header.jpg);
	height: 86px;
	background-repeat: no-repeat;
	padding-left: 381px;
	width: 381px;
}
#topnav {
	background-image: url(images_mainpage/topnav.jpg);
	float: left;
	padding-left: 320px;
	background-repeat: no-repeat;
	height: 14px;
	width: 100%;
}
#topnav li   {
	display: inline;
	margin-right: 10px;
	margin-left: 10px;
}
#sidenav {
	background-image: url(images_mainpage/sidenav.jpg);
	float: left;
	width: 177px;
	position: absolute;
	z-index: 1;
	background-repeat: no-repeat;
	padding-top: 50px;
	padding-left: 10px;
}
#iframe-wrap {
	background-image: url(images_mainpage/sideslice.jpg);
	background-repeat: repeat-y;
}

**bernie1227** · 09-21-2012, 08:21 AM

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

personally, I'd suggest using <?php include ?> rather than iframes if you have access to a server. So what happens when you use height: 100%; ?

**Beverleyh** · 09-21-2012, 12:26 PM

Maybe this fix will work for you? http://stackoverflow.com/questions/5...ame-100-height

Alternatively, maybe a little js? http://th.atguy.com/mycode/100_percent_iframe/ (althought probably a bit old)

Or jQuery? http://stackoverflow.com/questions/8...er-size-resize / http://stackoverflow.com/questions/7...ze-dynamically

**dmuir** · 09-22-2012, 01:03 AM

Thanks Bernie,

I do not really understand php but have looked up what you suggested but don't understand how that would work for this website.

If I set the height to 100% the iframe shows up about 200px high.

If you look at http://www3.mbs.sd23.bc.ca/staff/dmu...tion/index.htm and try the sidebar Assignments Level A Term 1 link you will see that you can scroll down to the bottom whether in 1680x1050 or 1024x768 resolutions, this is what I am hoping to do. I have just started teaching Web Design and the old table based badly coded pages just doesn't cut it anymore.

Thanks,
DMuir

**dmuir** · 09-22-2012, 01:11 AM

Thanks Beverleyh for the suggestions one almost did it but not quite.

I tried all your suggestions but still not getting what I am looking for. Basically I am trying to get a scrollable iframe that takes up the whole content area and is viewable in both 1680x1050 and 1034x768 resolutions if possible. My old table based site did this but now that I am teaching high school level web design I needed to clean up my old site to divs as I will have senior students that know better. An old table based site that works somewhat is at http://www3.mbs.sd23.bc.ca/staff/dmu...tion/index.htm if you go to the sidebar and select Term 1 under Assignments, under Level A.

Thanks,
DMuir