css-layout wil maar niet lukken
Hallo mensen,
Ik ben vandaag al uren bezig met het maken van een gewenste layout maar het wil simpelweg niet lukken. Ik wil best mijn code posten maar wat ik nu heb is ook maar weer van het internet geplukt.
Ik zal uitleggen wat ik wil.
Ik wil een header en een footer over de gehele breedte van de pagina. De footer moet altijd onderaan de pagina blijven. Als er meer content komt, dan moet de pagina kunnen scrollen met de footer nog steeds netjes onderaan.
In de content wil ik een gecentreerde div van 980px breed met een afwijkende achtergrondkleur. Deze kan dus groeien in de hoogte. Maar als er niet voldoende content is moet de achtergrondkleur van de div wel paginavullend blijven. Ofwel, de div moet doorlopen tot aan de footer. Om het wat te verduidelijken heb ik onderstaand plaatje gemaakt.

Alvast bedankt voor de hulp. Degene die dit voor me kan oplossen ben ik eeuwig dankbaar!!!!
Ik ben vandaag al uren bezig met het maken van een gewenste layout maar het wil simpelweg niet lukken. Ik wil best mijn code posten maar wat ik nu heb is ook maar weer van het internet geplukt.
Ik zal uitleggen wat ik wil.
Ik wil een header en een footer over de gehele breedte van de pagina. De footer moet altijd onderaan de pagina blijven. Als er meer content komt, dan moet de pagina kunnen scrollen met de footer nog steeds netjes onderaan.
In de content wil ik een gecentreerde div van 980px breed met een afwijkende achtergrondkleur. Deze kan dus groeien in de hoogte. Maar als er niet voldoende content is moet de achtergrondkleur van de div wel paginavullend blijven. Ofwel, de div moet doorlopen tot aan de footer. Om het wat te verduidelijken heb ik onderstaand plaatje gemaakt.

Alvast bedankt voor de hulp. Degene die dit voor me kan oplossen ben ik eeuwig dankbaar!!!!
Even een vraagje. Wil je dat de gele content even lang is als de inhoud die er in zit of moet hij altijd zo lang zijn als de pagina?
bedoel je en
Gewijzigd op 02/11/2013 22:32:16 door nick kuijpers
Albert, ik wil dat de gele div minimaal zo hoog is als de afstand van header tot footer. Zou er bijv. maar 1 regel tekst in staan dan nog zou het gele vlak tot aan de footer moeten lopen. Maar als de inhoud toeneemt moet de gele div meegroeien.
Ik ben een heel eind gekomen. Mbv de sticky footer trick bleef de footer netjes onderaan, ook als de inhoud toenam. Maar iedere keer als ik ging kloten om een 980px brede div in het midden te krijgen ging het mis. Of ik kreeg de inhoud niet gecentreerd of dat lukte wel maar beperkte de achtergrond kleur zich tot de inhoud.
Ik ben een heel eind gekomen. Mbv de sticky footer trick bleef de footer netjes onderaan, ook als de inhoud toenam. Maar iedere keer als ik ging kloten om een 980px brede div in het midden te krijgen ging het mis. Of ik kreeg de inhoud niet gecentreerd of dat lukte wel maar beperkte de achtergrond kleur zich tot de inhoud.
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
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
<html>
<head>
<title>test</title>
<style>
#container
{
margin : 0px auto;
height : 90%;
overflow : auto;
}
#head
{
margin : 0px auto;
height : 10%;
background : red;
}
#content
{
margin : 0px auto;
width : 80%;
min-height : 90%;
background : yellow;
}
#footer
{
position : fixed;
left : 0px;
right : 0px;
bottom : 0px;
height : 10%;
background : blue;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
<head>
<title>test</title>
<style>
#container
{
margin : 0px auto;
height : 90%;
overflow : auto;
}
#head
{
margin : 0px auto;
height : 10%;
background : red;
}
#content
{
margin : 0px auto;
width : 80%;
min-height : 90%;
background : yellow;
}
#footer
{
position : fixed;
left : 0px;
right : 0px;
bottom : 0px;
height : 10%;
background : blue;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
@Santhe krijg je geen problemen met fixed footer als je met procenten werkt? ( zie het voor het eerst :p )
Ik heb er nog nooit problemen mee gehad.
In safari werkt het niet.
SanThe,
Dat is nog niet helemaal wat ik bedoelde. De footer is fixed maar die moet gewoon meeschuiven.
Bij de header heb ik boven, links en rechts een witte rand en tussen de gele content en de footer zit ook een witte rand.
Dat is nog niet helemaal wat ik bedoelde. De footer is fixed maar die moet gewoon meeschuiven.
Bij de header heb ik boven, links en rechts een witte rand en tussen de gele content en de footer zit ook een witte rand.
Zo dan?
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
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
<html>
<head>
<title>test</title>
<style>
#container
{
margin : 0px auto;
height : 100%;
overflow : auto;
}
#head
{
margin : 0px auto;
height : 10%;
background : red;
}
#content
{
margin : 0px auto;
width : 80%;
min-height : 80%;
background : yellow;
}
#footer
{
margin : 0px auto;
height : 10%;
background : blue;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<head>
<title>test</title>
<style>
#container
{
margin : 0px auto;
height : 100%;
overflow : auto;
}
#head
{
margin : 0px auto;
height : 10%;
background : red;
}
#content
{
margin : 0px auto;
width : 80%;
min-height : 80%;
background : yellow;
}
#footer
{
margin : 0px auto;
height : 10%;
background : blue;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
SanThe, dit is voor 99% wat ik wil. Enorm bedankt alvast.
Nog 1 kleine toevoeging. De header en footer zijn 10% en de content dus 80%. Maar is het ook mogelijk een footer van 120px hoog en een footer van 40px te verwerken in je script?
Mijn header bevat namelijk een header (duh) en een navigatiemenu en die zijn bij elkaar 120px hoog.
Nog 1 kleine toevoeging. De header en footer zijn 10% en de content dus 80%. Maar is het ook mogelijk een footer van 120px hoog en een footer van 40px te verwerken in je script?
Mijn header bevat namelijk een header (duh) en een navigatiemenu en die zijn bij elkaar 120px hoog.
Gewijzigd op 03/11/2013 11:23:00 door Robert Hamers
Met pixels gaat het naar mijn weten niet lukken op deze manier.
Kijk eens naar http://ryanfait.com/sticky-footer/




