How does that work, do you have some examples or where can I found this, because when I open a page in my iframe it show a scrollbar if the page is to long, I would like that it automatticly ajusts to the length of the page in my iframe
view code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>De Tuinengel</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
<style>
body {
font-family: sans-serif;
font-size: 70%;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 10%;
margin-right: 10%;
color: black;
background: #E4E4E4;
}
#main {
width: 740px;
height: 100%;
border-left: solid 1px #990000;
border-right: solid 1px #990000;
border-bottom: solid 1px #990000;
margin: 0 10px;
padding: 10px;
background: #FFFFFF;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 2em;
left: 2em;
width: 10em;
z-index:1;
}
#menu dt {
cursor: pointer;
background: #990000;
height: 20px;
font-weight: bold;
line-height: 20px;
text-align: left;
text-indent: 5px;
border-color: #FFFFFF #666666 #666666 #FFFFFF;
background-color: #E4E4E4; border-style: solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 2px; border-left-width: 1px;
}
#menu dd {
position: absolute;
z-index: 100;
left: 20em;
margin-top: -1.4em;
width: 10em;
background: #E4E4E4;
border: 1px solid gray;
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
#menu li a:hover {
background: #990000;
font-weight: bold;
}
#menu dt a:hover {
background: #990000;
text-indent : 15px;
}
.iframe {
left: 125px;
top: 50px;
z-index:0;
}
</style>
<script language = "javascript" src="tejs.js">
</script>
</head>
<body>
<div id="main">
<img src="pictures/logo.jpg">
<table border="0" width="100%" heigth="100%">
<tr>
<td width="15%" heigth="100%" valign="top">
<!-- BEGIN Menu -->
<dl id="menu">
<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show();"><a href="homepage.html" target="content">HOMEPAGINA</a></dt>
<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show();"><a href="historiek.html" target="content">HISTORIEK</a></dt>
<dt onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();"><a href="#" target="content">WORKSHOPS</a></dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();">
<ul>
<li><a href="#" target="content">Inhoud</a></li>
<li><a href="#" target="content">Overzicht</a></li>
<li><a href="#" target="content">Nieuw</a></li>
<li><a href="recept.html" target="content">Recepten</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show();"><a href="fotos.html" target="content">FOTOS</a></dt>
<dt onmouseover="javascript:show('smenu5');" onmouseout="javascript:show();"><a href="#" target="content">INSCHRIJVINGEN</a></dt>
</dl>
<!-- END Menu -->
</td>
<td width="80%" heigth="100%">
<iframe name="content" src="homepage.html" width="100%" height="900px" frameborder="0" class="iframe" scrolling=no></iframe>
</td>
</tr>
</table>
<table border="0" width="100%" heigth="100%">
<tr>
<td width="15%" heigth="100%" valign="top"></td>
<td width="70%" heigth="100%">CGG</td>
<td width="15%" heigth="100%" valign="top"></td>
</tr>
</table>
</div>
</body>
</html>
</html>