VelVet
Legacy Member
Zou graag een 100% height pagina hebben met divs.
nu is het probleem dat de pagina te lang is?
zou moeten stoppen onder de footer.
het geen ik tot nu toe heb:
en voorbeeld te vinden hier
Weet hier meschien iemand een oplossing op? heb al enkele uren tevergeefs gezocht.
Alvast bedankt.
nu is het probleem dat de pagina te lang is?
zou moeten stoppen onder de footer.
het geen ik tot nu toe heb:
Code:
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#rp_header {
position:relative;
left:0px;
top:0px;
width:1100px;
height:161px;
z-index:1;
}
#rp_content {
position:absolute;
left:0px;
top:161px;
width:1100px;
height:100%;
z-index:2;
}
#rp_links {
position:absolute;
left:0px;
top:161px;
width:166px;
height:100%;
z-index:3;
background-image: url(test/images/design-sliced_10.jpg);
}
#rp_midden {
position:absolute;
left:166px;
top:161px;
width:771px;
height:100%;
z-index:4;
background-image: url(test/images/design-sliced_11.jpg);
}
#rp_rechts {
position:absolute;
left:937px;
top:161px;
width:162px;
height:100%;
z-index:5;
background-image: url(test/images/design-sliced_12.jpg);
}
#rp_footer {
position:absolute;
left:0px;
bottom:0px;
width:1100px;
height:19px;
text-align:center;
z-index:6;
background-image: url(test/images/design-sliced_01.jpg);
}
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center; /* for ie6 and under */
min-width:1100px;/* for mozilla*/
}
#outer{
min-height:100%;
width:1102px; /* add 2px if borders are not used */
text-align:left;
margin:auto;
position:relative;
/* The background image needs to be the same width as the #left div. The one I used is 138px X 9px */
}
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
-->
</style>
</head>
<body background="bg_pattern.jpg">
<div id="outer">
<div id="rp_header"><img src="test/images/design-sliced_01.jpg" width="1100" height="19" /><img src="test/images/design-sliced_02.jpg" width="1100" height="105" /><img src="test/images/design-sliced_03.jpg" width="247" height="37" /><img src="test/images/design-sliced_04.jpg" width="90" height="37" /><img src="test/images/design-sliced_05.jpg" width="83" height="37" /><img src="test/images/design-sliced_06.jpg" width="130" height="37" /><img src="test/images/design-sliced_07.jpg" width="116" height="37" /><img src="test/images/design-sliced_08.jpg" width="134" height="37" /><img src="test/images/design-sliced_09.jpg" width="300" height="37" /></div>
<div id="rp_content"></div>
<div id="rp_links"></div>
<div id="rp_midden">
<p>sqsdf</p>
<p>qsdf</p>
<p>qsdf</p>
<p>qsdf</p>
<p>qsd</p>
<p>qsf</p>
<p>qds</p>
<p>qsd</p>
</div>
<div id="rp_rechts"></div>
<div id="rp_footer">footer</div>
</div>
</body>
</html>Weet hier meschien iemand een oplossing op? heb al enkele uren tevergeefs gezocht.
Alvast bedankt.
