Nieuw lid |
|
Ik heb een werkende opzet voor je gemaakt. Hier moet je wel mee verder kunnen!
Succes,
Wouter
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
function resizescreen()
{
//Hier bekijk je welke hoogte er beschikbaar is voor de browser.
var WindowHeight = 0;
if( typeof( window.innerHeight ) == 'number' )
{
//Non-IE
WindowHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientHeight) )
{
//IE 6+ in 'standards compliant mode'
WindowHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientHeight ) )
{
//IE 4 compatible
WindowHeight = document.body.clientHeight;
}
//Einde bepalen window inner height
//In deze situatie is er een gekozen om altijd fullscreen te werken. De contentdiv wordt dus altijd opgerekt
//tot de maximum hoogte minus de hoogte van de footer en de header. de "2" die gepost wordt is borderafhankelijk
//Hiermee moet je even zoeken naar "the magic number".
var contentLeft = document.getElementById('content-left');
var contentMain = document.getElementById('content-main');
var header = document.getElementById('header');
var footer = document.getElementById('footer');
var DivHeight = WindowHeight - header.offsetHeight - footer.offsetHeight;
if (contentLeft.offsetHeight < contentMain.offsetHeight)
{
if (contentMain.offsetHeight < DivHeight)
{
contentMain.style.height = DivHeight + "px";
contentLeft.style.height = DivHeight + "px";
}
else
{
contentLeft.style.height = contentMain.offsetHeight + "px";
}
}
else
{
if (contentLeft.offsetHeight < DivHeight)
{
contentMain.style.height = DivHeight + "px";
contentLeft.style.height = Divheight + "px";
}
else
{
contentMain.style.height = contentLeft.offsetHeight + "px";
}
}
}
</script>
<script type="text/javascript">
window.onresize = resize;
function resize()
{
setTimeout('resizescreen()', 1000);
}
</script>
<style type="text/css">
html, body
{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
p
{
margin: 0px 0px 10px 0px;
}
#header
{
position: absolute;
top: 0px;
left: 0px;
background-color: fuchsia;
width: 100%;
height: 100px;
text-align: center;
}
#content-left
{
position: absolute;
top: 100px;
left: 0px;
background-color: green;
float: left;
width: 165px;
}
.menu
{
border: 2px solid blue;
background-color: silver;
margin: 10px;
width: 141px;
height: 20px;
text-align: center;
}
#content-main
{
position: absolute;
top: 100px;
left: 165px;
padding: 10px;
}
#footer
{
position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
height: 20px;
background-color: black;
color: white;
text-align: center;
}
</style>
</head>
<body onLoad="resizescreen();">
<div id="header"><h1>Dit is de header</h1></div>
<div id="content-left">
<div class="menu"><a href="#">Menu Item 1</a></div>
<div class="menu"><a href="#">Menu Item 1</a></div>
<div class="menu"><a href="#">Menu Item 1</a></div>
<div class="menu"><a href="#">Menu Item 1</a></div>
</div>
<div id="content-main">
<p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
<p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
<p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
<p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p>
</div>
<div id="footer">Dit is de footer</div>
</body>
</html>
<!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript"> function resizescreen() { //Hier bekijk je welke hoogte er beschikbaar is voor de browser. var WindowHeight = 0; if( typeof( window.innerHeight ) == 'number' ) { //Non-IE WindowHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientHeight) ) { //IE 6+ in 'standards compliant mode' WindowHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientHeight ) ) { //IE 4 compatible WindowHeight = document.body.clientHeight; } //Einde bepalen window inner height //In deze situatie is er een gekozen om altijd fullscreen te werken. De contentdiv wordt dus altijd opgerekt //tot de maximum hoogte minus de hoogte van de footer en de header. de "2" die gepost wordt is borderafhankelijk //Hiermee moet je even zoeken naar "the magic number". var contentLeft = document.getElementById('content-left'); var contentMain = document.getElementById('content-main'); var header = document.getElementById('header'); var footer = document.getElementById('footer'); var DivHeight = WindowHeight - header.offsetHeight - footer.offsetHeight; if (contentLeft.offsetHeight < contentMain.offsetHeight) { if (contentMain.offsetHeight < DivHeight) { contentMain.style.height = DivHeight + "px"; contentLeft.style.height = DivHeight + "px"; } else { contentLeft.style.height = contentMain.offsetHeight + "px"; } } else { if (contentLeft.offsetHeight < DivHeight) { contentMain.style.height = DivHeight + "px"; contentLeft.style.height = Divheight + "px"; } else { contentMain.style.height = contentLeft.offsetHeight + "px"; } } } <script type="text/javascript"> window.onresize = resize; function resize() { setTimeout('resizescreen()', 1000); } html, body { font-family: Verdana, Geneva, sans-serif; font-size: 12px; } p { margin: 0px 0px 10px 0px; } #header { position: absolute; top: 0px; left: 0px; background-color: fuchsia; width: 100%; height: 100px; text-align: center; } #content-left { position: absolute; top: 100px; left: 0px; background-color: green; float: left; width: 165px; } .menu { border: 2px solid blue; background-color: silver; margin: 10px; width: 141px; height: 20px; text-align: center; } #content-main { position: absolute; top: 100px; left: 165px; padding: 10px; } #footer { position: fixed; width: 100%; bottom: 0px; left: 0px; height: 20px; background-color: black; color: white; text-align: center; } <body onLoad="resizescreen();"> <div class="menu"><a href="#">Menu Item 1 </a></div> <div class="menu"><a href="#">Menu Item 1 </a></div> <div class="menu"><a href="#">Menu Item 1 </a></div> <div class="menu"><a href="#">Menu Item 1 </a></div> <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p> <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p> <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p> <p>Aliquam erat volutpat. Nullam velit ipsum, pulvinar sit amet venenatis vel, posuere non diam. Etiam a odio sed ipsum tincidunt laoreet in ac odio. Morbi malesuada diam id lacus volutpat tempor. Proin a augue felis. Nam sed felis tortor. Integer lacinia, turpis adipiscing tempus ullamcorper, arcu lectus pellentesque turpis, quis tristique velit nulla pretium arcu. Mauris bibendum congue sagittis. Integer vitae ipsum eget est convallis condimentum. Mauris bibendum feugiat massa non lobortis. Praesent malesuada pharetra semper. Cras volutpat, neque vel tempor volutpat, nisl dui venenatis neque, ac luctus velit tortor sit amet tellus. Cras id tellus leo. Fusce suscipit nulla at ligula facilisis et condimentum eros lobortis. Aenean vel convallis orci. </p> <div id="footer">Dit is de footer </div>
|