CSS container 100% hoog, div rest van pagina laten vullen - Softwareontwikkeling

maandag 16 juni 2008 18:51

Acties:

Topicstarter

Ik ben bezig om een website te maken in CSS /XHTML. de site is XHTML strict valid.
De website heeft een container div die 100% hoog is, dan zijn er 3 rijen div's.
Het probleem is nu dat de onderste div (middenonder) altijd 100% hoog is (dus doorloopt), maar mijn bedoeling is dat de pagina 100% hoog is, en als de tekst in de onderste div te veel is, de scrollbar in die div komt.
Hoe kan ik ervoor zorgen dat die onderste div de rest van de pagina in beslag neemt?

Voorbeeld: http://84.53.90.88/php/anne2/index.php?module=404 (ik wil de scrollbar in de body dus weg hebben, zodat er alleen in de div een scrollbar komt)
Dit is mijn css:

Cascading Stylesheet:

html, body { height: 100%; width: 100%}
body{
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#c0b8b8;
background-image:url(../images/style/bg.jpg);
    background-attachment: fixed;
    background-repeat: repeat-x;
    margin: 0 0 0 0;
padding: 0 0 0 0;
overflow: hidden;
}
#container{
margin: 0 auto;
position: relative;
text-align: left;
position:relative;
height: 100%;
width:925px;
margin:auto;
}
#middenboven{
position:absolute;
margin-top:5px;
margin-left:1px;
height:210px;
width:630px;
display:block;
background-color:#E9E9E9;
}
#rechtsboven{
position:absolute;
margin-left:1px;
margin-top:5px;
height:210px;
width:274px;
display:block;
background-color:#E9E9E9;
}
#middenonder{
position:absolute;
top:280px;
left:-0px;
overflow:auto;
float:left;
margin-top:5px;
margin-left:1px;
width:630px;
height:100%;
max-height:100%;
display:block;
background-color:#E9E9E9;
}
#rechtsonder{
position:absolute;
top:280px;
left:-0px;
float:left;
margin-left:1px;
margin-top:5px;
min-height:100%;
height:auto !important;
width:274px;
display:block;
background-color:#E9E9E9;
}
 
#midden{
position:absolute;
top:5px;
left:10px;
height:100%;
width:630px;
}
#rechts{
position:absolute;
top:5px;
left:642px;
height:100%;
width:254px;
margin-bottom:10px;
}

html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="include/style.css" type="text/css" rel="stylesheet"/>
<!--[if lt IE 8]>

<link href="include/style_ie.css" type="text/css" rel="stylesheet"/>
<![endif]-->
</head>
<body onload="scherm()">
<div id="container">
<div id="midden">
<div id="middenboven">
 </div>
<div id="middenonder">
</div>
</div>
<div id="rechts"> 
<div id="rechtsboven">
</div>
<div id="rechtsonder">
</div>
</div>
</body>
</html>

maandag 16 juni 2008 18:58

Acties:

Noork

Dat gaat niet met CSS en div's. Zoek maar eens op faux columns. En anders moet je iets met Javascript doen. Hier op Got is echt genoeg over 100 hoogte te vinden. Succes.

maandag 16 juni 2008 19:00

Acties:

Knaak

It's me, Mario!

Dit mogen ze inmiddels wel als sticky maken (faux columns tip). Er word wel erg veel naar gevraagd. Maargoed, hopelijk word dit ooit wel mogelijk.

tip: list apart heeft hier een goed artikel over.

maandag 16 juni 2008 19:04

Acties:

DamadmOO

Noork schreef op maandag 16 juni 2008 @ 18:58:
Dat gaat niet met CSS en div's. Zoek maar eens op faux columns. En anders moet je iets met Javascript doen. Hier op Got is echt genoeg over 100 hoogte te vinden. Succes.

Dit kan zeker wel met CSS en div's. Ik heb dit een jaar of 2/3 geleden gedaan voor www.orkfia.org.

Kijk daar maar naar de sourcecode en dan zie je snel genoeg hoe het zit. Heb op het moment even geen tijd om zelf de relevante code eruit te knippen (kijk trouwens niet naar de rest van de css want mijn opvolger heeft er een mooie bende van gemaakt.)

maandag 16 juni 2008 19:23

Acties:

mathijs92

Topicstarter

Ik heb de code van orkfia.org doorgelezen en ik heb het in IE 7 en FF2 (andere nog niet getest) werkend gekregen, ik heb deze code gebruikt:

Cascading Stylesheet:

#middenonder{
position:absolute;
top:280px;
left:-0px;
overflow:auto;
float:left;
margin-top:5px;
margin-left:1px;
width:630px;
bottom:10px;
max-height:100%;
display:block;
background-color:#E9E9E9;
}
#rechtsonder{
position:absolute;
top:280px;
left:-0px;
float:left;
margin-left:1px;
margin-top:5px;
bottom:10px;
width:274px;
display:block;
background-color:#E9E9E9;
}

eigenlijk heel simpel, height weghalen en er een bottom voor in de plaats zetten.

[ Voor 7% gewijzigd door mathijs92 op 16-06-2008 19:27 ]