[opgelost][css]100% height van de content
Ik ben al een tijdje met een layout bezig maar nu loop ik vast met het volgende:
Ik heb een header, 3 kolommen en dan een footer. Nu is het zo dat dat allemaal mooi is gelukt, het werkt allemaal goed tot je in 1 van de kolommen minder informatie zet dan de andere kolommen. Dan groeien ze niet mee.
Nou is het zo dat in de meeste gevallen de zijkanten te kort zijn dus toen heb ik de kleur onder de 3 kolommen dezelfde heb gemaakt dan de kleur van de zijkanten. Staat er dan echter te weinig informatie in de middelste kolom dan gaat het dus weer verkeerd.
Nu is mijn vraag of jullie ook een idee hebben om de content een 100% height te geven.
Dit heb ik in een ander topic gevonden maar helaas stond hier niets bruikbaars bij.
Jan Koehoorn schreef op 10.07.2007 22:27:
Ik heb nog een goede tip! Niet alleen voor jou, maar voor iedereen hier. Kijk eens op The only CSS layout you need? Daar staan de meest voorkomende lay-outs kant en klaar voor je.
Ik adviseer om ze goed te bestuderen en niet klakkeloos over te nemen, dat spreekt voor zich ;-)
Ik adviseer om ze goed te bestuderen en niet klakkeloos over te nemen, dat spreekt voor zich ;-)
1 van de layouts kwam in de buurt:
http://www.strictlycss.com/examples/three-column-layout-1.asp
Maar dit had ik zelf ook al bereikt.
mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
<title>Forza Heerenveen</title>
<link rel="stylesheet" href="css2.css" type="text/css" media="screen" />
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main">
<div class="left">
Linkerkant
</div>
<div class="content">
Content - Hier komt het nieuws
</div>
<div class="right">
Rechterkant!
</div>
</div>
<div class="footer">Footer</div>
</body>
</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>
<title>Forza Heerenveen</title>
<link rel="stylesheet" href="css2.css" type="text/css" media="screen" />
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main">
<div class="left">
Linkerkant
</div>
<div class="content">
Content - Hier komt het nieuws
</div>
<div class="right">
Rechterkant!
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
Css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body {
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(testarea/images/background.png);
color: #FFFFFF;
height: 100%;
min-height: 100%
height: auto;
}
.container {
width: 900px;
margin: 0px auto;
background-color: #12158a;
height: 100%;
min-height: 100%
height: auto;
}
.header {
width: 900px;
height: 150px;
background-image: url(testarea/images/header.png);
margin: 0px auto;
}
.left {
float: left;
width: 175px;
background-color: #12158a;
}
.content {
float: left;
width: 546px;
background-color: #FFFFFF;
margin: 2px 2px 0px 2px;
color: #000000;
height: 100%;
min-height: 100%
height: auto;
}
.right {
float: right;
width: 175px;
background-color: #12158a;
}
.footer {
clear: both;
width: 900px;
height: 25px;
background-color: #12158a;
text-align: center;
color: #FFFFFF;
margin: 0px auto;
}
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(testarea/images/background.png);
color: #FFFFFF;
height: 100%;
min-height: 100%
height: auto;
}
.container {
width: 900px;
margin: 0px auto;
background-color: #12158a;
height: 100%;
min-height: 100%
height: auto;
}
.header {
width: 900px;
height: 150px;
background-image: url(testarea/images/header.png);
margin: 0px auto;
}
.left {
float: left;
width: 175px;
background-color: #12158a;
}
.content {
float: left;
width: 546px;
background-color: #FFFFFF;
margin: 2px 2px 0px 2px;
color: #000000;
height: 100%;
min-height: 100%
height: auto;
}
.right {
float: right;
width: 175px;
background-color: #12158a;
}
.footer {
clear: both;
width: 900px;
height: 25px;
background-color: #12158a;
text-align: center;
color: #FFFFFF;
margin: 0px auto;
}
Ik heb nu alle informatie uit de kolommen weggehaald omdat dit onnodig veel ruimte in zou nemen.
Een online voorbeeld heb ik helaas niet omdat ik hem om mijn localhost test.
Iedereen alvast bedankt voor de hulp
Gewijzigd op 01/01/1970 01:00:00 door Remco
ik had de div container en content beide al een hoogte van 100% meegegeven. Dit is alleen bij het toevoegen van de post op duistere reden weg gegeaan(zal wel verkeerde versie zijn geweest(net gewijzigd en nu wel goed))
Het helpt echter ook niet :S
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
html>body #container { height: auto; }
trouwens, div's in je CSS zet je neer met #, ipv .
dus #container ipv .container
Gewijzigd op 01/01/1970 01:00:00 door winkie
Zit er trouwens verschil in het gebruik van # ipv .? Als je # gebruikt moet je de div een id meegeven bij een punt een class. Weet niet of het van belang is als dat veranderd.
Dat moet natuurlijk een beetje overeenkomen met de div in t midden.
http://nieuwesite.forzaheerenveen.nl/test2.html
Dit is wat ik aan het begin van dit topic had.
http://nieuwesite.forzaheerenveen.nl/test3.html
Gewijzigd op 01/01/1970 01:00:00 door remco
Mijn (slimme brein) kwam met het idee om met dat voorbeeld van Jan Koehoorn (zie een paar posts hierboven) wat verder te gaan werken. Dit lijkt namelijk goed te gaan. Nu was mijn idee om 3 keer het stukje van Jan naast elkaar te bebruiken omdat je dan, naar mijn mening 3 keer een kolom tot beneden aan toe krijgt. Nu werkt dit echter niet. Je kijrgt namelijk gewoon een kolom die tot aan de lengte van de tekst loopt en niet tot aan de onderkant van de pagina. Nu is mijn vraag of er nog iemand een idee heeft om dit op te lossen.
Alvast bedankt voor de moeite!
Google maar :)
Edit: even voor je gedaan:
http://www.alistapart.com/articles/fauxcolumns/
Gewijzigd op 01/01/1970 01:00:00 door winkie
Heb ook al een site gevonden waarbij men het ook goed heeft gekregen.
Link naar die site:
http://www.forza-az.nl/news.php
Ik ben nu hier wat mee aan het knutselen geslagen en als dit niet mocht lukken dan zal ik me verdiepen in FAUX COLUMNS
Winkie bedankt voor je hulp tot zover.
Edit:
Probleem is nu opgelost en dit is het resultaat als ik er verder niets in heb staan. Jullie zullen misschien nu wel denken, hij komt niet tot aan beneden toe. Dit maakt niet echt veel uit want als ik er informatie inzet dan komt er bijna altijd wel 1 van de kolommen tot de onderkant van je scherm en nu rekt alles dus mooi mee ;)
Link:
http://nieuwesite.forzaheerenveen.nl/
Gewijzigd op 01/01/1970 01:00:00 door remco