0

First, I know there are a lot questions like this. I've read a lot of them, but they didn't help.

Here's my html:

<!DOCTYPE html>  
<html class="bg3">    
<head>
<title>Foto's</title>
<link rel="stylesheet" href="style.css">
<script>
function go(loc){
var iframe = document.getElementById("iframe");  
iframe.style.display="block";
document.getElementById('iframe').src = loc;}
</script>
</head>
<body style="width:90%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;">
<br>
<div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<br>
<div id="menu2"><ul><li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li><li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li><li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li><li><a href="contact.html">2005-2006</a></li><li><a href="index.html">2006-2007</a></li><li><a href="index.html">2007-2008</a></li><br><li><a href="index.html">2008-2009</a></li><li><a href="index.html">2009-2010</a></li><li><a href="index.html">2010-2011</a></li><li><a href="index.html">2011-2012</a></li><li><a href="index.html">2012-2013</a></li><li><a href="index.html">2013-2014</a></li><li><a href="index.html">2014-2015</a></li></ul></div>
<br>
<iframe onload="autoResize('iframe')" id="iframe" src="about:blank" style="width: 95%;height:100%;margin-left:auto;margin-right:auto;">
</body>
</html>

And here's my css:

.red {border-style:outset;border-width:5px;border-color:#FF0000;background-color:rgba(255,255,255,1);}
.yellow {border-style:outset;border-width:5px;border-color:#FFFF00;background-color:rgba(255,255,255,1);}
.green {border-style:outset;border-width:5px;border-color:#00FF00;background-color:rgba(255,255,255,1);}
.blue {border-style:outset;border-width:5px;border-color:#0066FF;background-color:rgba(255,255,255,1);}

.bg1 {background-image:url(files/bg1.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg2 {background-image:url(files/bg2.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg3 {background-image:url(files/bg3.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg4 {background-image:url(files/bg4.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg5 {background-image:url(files/bg5.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}
.font3 {font-family:calibri;font-size:20px;}

.trans {opacity:0.75;}
.trans:hover {opacity:1;}

#iframe {display:none;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

html, body{cursor: url(files/cursor.cur), progress !important;Height: 100%;}
table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

I'm trying to make a nice photo page but this tends to happen:

Is there a way to auto adjust the iframe or increase the body height? I just want it to look good. I appreciate your help.

adrianbanks
  • 81,306
  • 22
  • 176
  • 206
HYBR1D
  • 464
  • 2
  • 6
  • 19

2 Answers2

0

I am taking the answer from here, since it's a very similar case.

<div>
<iframe id='iframe' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
    width: 100%; position: absolute;" height="100%" width="100%"></iframe>
</div>
Community
  • 1
  • 1
d_z90
  • 1,213
  • 2
  • 19
  • 48
  • I've already found something else but i'll still try this. If it works, it probably works better than my solution. – HYBR1D Mar 15 '15 at 21:14
  • 1
    Your idea actually worked better than mine! If you want to see what it looks like: https://www.dropbox.com/s/oy2edexxudbb2rv/Schermopname%20%2864%29.png?dl=0 . I had to change it a little though: – HYBR1D Mar 15 '15 at 21:19
0

I've already found the answer myself. Sorry for bothering. I still appreciate the help though, and i'd like to learn other wats to do it. It could always come in handy.

all i had to do was to change the body and html height in my css to 110%.

HYBR1D
  • 464
  • 2
  • 6
  • 19