kvnirvana Posted October 29, 2010 Share Posted October 29, 2010 I have a problem with my footer on my index page. The Iframe uses the javascript function calcHeight to resize the Iframe. The problem is that if there is a lot of content to be displayed in the iframe the footer just stays the same place in stead of always being at the bottom. How can I fix this? index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <TITLE>Sea</TITLE> <script language="JavaScript">function parentTop(){ parent.window.location.hash = '#top';}</script> <script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } //--> </script> <style type="text/css"> #nav-menu ul p { font-family: verdana ; } p { font-size: 20px; } { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin: 0em; } #nav-menu li a { height: 2em; line-height: 2em; float: left; width: 11em; display: block; color: #000000; text-decoration: none; text-align: center; border-bottom: 1px solid white; } /* Hide from IE5-Mac \*/ #nav-menu li a { float: none } /* End hide */ #nav-menu { width:20em } #img { width: 100px; height : auto; } #img { width: auto; height : 176px; } #billede forsvinder { width: 100%; position: absolute; top: 0; left: 0; } </style> </HEAD> <BODY > <DIV style="position:absolute;left:0px;top:0px;z-index:1"> <img src="sea.jpg" id="img"/> </DIV> <div id="nav-menu" style="position:absolute;center:0px;top:143px;width:100%;height:100%;z-index:2" > <ul> <li><a href="front.php" target="kasp"><p>Front</p></a></li> <li><a href="sog.php" target="kasp"><p>Sng</p></a></li> </ul> </div> <DIV style="position:absolute;center:0px;top:165px;width:100%;height:100%;z-index:1" align="left"><TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"><TR><TD align="left" valign="top" width="100%" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><hr></B></FONT></TD></TR></TABLE></DIV> <iframe width="100%" id="the_iframe" name="kasp" onLoad="calcHeight();" style="position:absolute;center:1px;top:175px;z-index:1" src="front.php" scrolling="NO" frameborder="0" height="1"> iframe capable browser is required to view this web site.</iframe> <div style="position:absolute;center:1px;top:875px;z-index:1 "> <hr> <small>Copyright 2010 Sea.dk</small><br> </body> </html> <br> <br> </div> Quote Link to comment Share on other sites More sharing options...
haku Posted October 29, 2010 Share Posted October 29, 2010 http://www.cssstickyfooter.com/ Quote Link to comment Share on other sites More sharing options...
unistake Posted October 29, 2010 Share Posted October 29, 2010 You have put the </div> outside the </html>: Replace this: <div style="position:absolute;center:1px;top:875px;z-index:1 "> <hr> <small>Copyright 2010 Sea.dk</small><br> </body> </html> <br> <br> </div> With this: <div style="position:absolute;center:1px;top:875px;z-index:1 "> <hr> <small>Copyright 2010 Sea.dk</small> <br> </div> </body> </html> Edit: To change layout of code. Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted October 29, 2010 Author Share Posted October 29, 2010 Ok I made the change but it still doesn't work. Quote Link to comment Share on other sites More sharing options...
unistake Posted October 29, 2010 Share Posted October 29, 2010 sorry cant help you anymore, html is not my forte. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.