I have a situation for a page I'm designing for an internal company website. I'm trying to get an iframe to expand to 100% of a div, yet still having difficulty. When I insert the iframe into the div, it will expand to 100% width, but will not expand to 100% height. I've had to hand-write all of it, and I'll admit I've been a little less-than-careful about keeping my code clean. Any suggestions? My HTML and CSS coding is below:
CSS code:
Code:
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
height:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;}
a {
color:#369;}
a:hover {
color:#fff;
background:#369;
text-decoration:none;}
a.debit:link {color: #006600;}
a.debit:active {color: #66ff66;}
a.debit:visited {color: #669933;}
a.debit:hover {color: #99cc00;}
a.fraud:link {color: red;}
a.fraud:active {color: orange;}
a.fraud:visited {color: red;}
a.fraud:hover {color: orange;}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;}
p {
margin:.4em 0 .8em 0;
padding:0;}
p.one {
font-family: Arial;
font-size: large;
font-weight: bold;
text-align: center;}
p.two {
font-family: Arial Narrow;
length: 20px
font-weight: bold;}
p.three {
font-family: Arial Narrow;
font-length: 20px;
line-height:120%}
p.four {
font-family: Arial;
length: 20px;
line-height:120%}
p.bottom {
font-family: Arial Narrow;
font-size: medium;
line-height: 120%}
ul.one {
font-family: Arial;
length: 20px;
line-height: 120%}
img {
margin:10px 0 5px;}
#ads img {
display:block;
padding-top:10px;}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;}
#header {
border-bottom:1px solid #000;}
#header p, #header h1, #header h2 {
padding:.4em 15px 0 15px;
margin:0;}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;}
#header ul li a:hover {
background:#369;
color:#fff;}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;}
#header ul li a span {
display:block;}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */}
/* common column settings */
.colright, .colmid, .colleft {
float:left;
width:100%; /* width of page */
position:relative;}
.col1, .col2, .col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;}
/* 3 Column settings */
.threecol {
background:#f4f4f4; /* right column background colour */}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */}
/* Footer styles */
#footer {
background: #4f4f4f;
color: #ffffff;
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
HTML CODE (stripped of content, as I cannot put the internal company info online):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Title This</title>
<link rel="stylesheet" type="text/css" href="redalert.css" media="screen" />
<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
<script language="JavaScript1.3" type="text/javascript" src="jse_form.js">
</script>
</head>
<body>
<div id="header">
<p class="three" style="text-align: center;">Header Image <ul>
<li><a href="index.html" class="active">Fashion Platform<span>Home Page</span></a></li>
<li><a href="link1.html">Link<span>One</span></a></li>
<li><a href="link2.html">Link<span>Two</span></a></li>
<li><a href="link3.html">Link<span>Three</span></a></li>
<li><a href="link4.html">Link<span> Four</span></a></li>
</ul>
<p id="layoutdims" style="background: #cc0000; color: #ffffff;">Lorem Ipsom</p>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1" style="height: 100%;">
<!-- Mid Col Start -->
<!--
<a href="#"></a> |
<p class="one"><a name=""></a>
<p class="four"><b><i>Sent </b></i>
<p class="four">
<p class="four" style="text-align: center;"><a href="documents/"></a>
!-->
<!-- THIS IS THE DIV AND IFRAME I AM HAVING ISSUES WITH !-->
<div style="
clip: rect(0,381,381,0); // right-clip equal to div width plus total border width
// bottom-clip equal to div height plus total border height
position:absolute; // used for positioning and may or may not be required
background: #eee; // background color of div may or may not be seen
height: 100%; // height of window (div) that contains the iframe content
width: 99%; // width of window (div) that contains the iframe content
left: 0; // absolute position of window (div) from the left edge of browser
top: 0; // absolute position of window (div) from the top edge of browser
">
<iframe
name="frame"
src="http://nfsb/opsqb" // location of external resource
width="99%" // width of iframe should match the width of containing div
height="100%" // height of iframe should match the height of containing div
marginwidth="0" // width of iframe margin
marginheight="0" // height of iframe margin
frameborder="no" // frame border preference
scrolling="yes" // instructs iframe to scroll overflow content
style="
border-style: none; // border style
border-color: #444; // border color
border-width: 0px; // border width
background: #FFF; // background color
">
</iframe>
</div>
</div>
<div class="col2">
<!-- Left Column Start -->
<p class="four">Navigation Goes Here
</div>
<div class="col3">
<!-- Right Column Start !-->
<p class="four">Right Column Content Here
</div> </div>
</div>
</div>
<div id="footer">
<p class="three">Developed by me. Duh.
</div>
</body>
</html>