Log in

View Full Version : 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/dmuir/webdesign/index.htm

HTML used:

<!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:

@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 /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

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/5867985/iframe-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/838137/jquery-change-height-based-on-browser-size-resize / http://stackoverflow.com/questions/7317781/how-to-set-iframe-size-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/dmuir/animation/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/dmuir/animation/index.htm if you go to the sidebar and select Term 1 under Assignments, under Level A.

Thanks,
DMuir
bernie1227
09-22-2012, 01:58 AM
well, include is used like iframes, it is just more acceptable in web development. see here (http://php.net/manual/en/function.include.php) for more information.