Pagina over verschillende hoogtes verdelen
Ik ben vandaag begonnen met het maken van een layout. Ik loop nu al een uurtje te worstelen met iets wat ik wil uitvoeren.
Omdat ik het niet echt goed uit kan leggen in woorden heb ik even een plaatje gemaakt die hopelijk goed beschrijft wat ik wil. Waar het 'em nu nog om gaat is dat ik die blauwe container (zie plaatje) niet goed krijg.
Hoe kan ik die formule laten uitvoeren d.m.v. CSS? Ik wil dus dat de hoogte van de blauwe container alle ruimte in neemt die die in kan nemen maar niet meer (dus niet de footer en header).
(Om een container met position relative te maken en daarin de header en footer met position absolute is geen oplossing. Ik wil namelijk ook weer dat ik in het blauwe vak een height 100%; kan meegeven.)
Machiel.
Gewijzigd op 01/06/2013 15:35:32 door Machiel K
Vervolgens iets wat je nu ook al wel zou kunnen gebruiken: CSS calc() Voorbeeld: http://cdpn.io/AHaKE | Browser support: http://caniuse.com/#feat=calc
En mocht je dit met CSS 2.1 willen doen: Gebruik dezelfde techniek als je met faux columns gebruikt. Geef, in mijn voorbeeldjes, .page__content een achtergrondafbeelding mee die overeen komt met de achtergrond van de container en de sidebar. Plaats de footer vervolgens doormiddel van sticky footer onderin. De container en de sidebar geef je nu geen achtergrond mee. Het lijkt dan alsof ze tot onderin doorlopen, aangezien de achtergrond van .page__content doorloopt, maar in het echt stoppen de container en sidebar al eerder.
Gewijzigd op 02/06/2013 23:01:33 door Wouter J
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
54
55
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
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#grandContainer {
height: 100%;
width: 980px;
margin: 0 auto;
position: relative;
}
#header {
height: 100px;
background: maroon;
}
#article {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 150px;
background: blue;
}
#side {
position: absolute;
top: 100px;
bottom: 100px;
left: 830px; /* 980 - 150 */
right: 0px;
background: red;
}
#footer {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
background: black;
}
</style>
</head>
<body>
<div id="grandContainer">
<div id="header"></div>
<div id="article"></div>
<div id="side"></div>
<div id="footer"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#grandContainer {
height: 100%;
width: 980px;
margin: 0 auto;
position: relative;
}
#header {
height: 100px;
background: maroon;
}
#article {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 150px;
background: blue;
}
#side {
position: absolute;
top: 100px;
bottom: 100px;
left: 830px; /* 980 - 150 */
right: 0px;
background: red;
}
#footer {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
background: black;
}
</style>
</head>
<body>
<div id="grandContainer">
<div id="header"></div>
<div id="article"></div>
<div id="side"></div>
<div id="footer"></div>
</div>
</body>
</html>
De uitleg vind je in deze tutorial: Make A Fixed ('Sticky') Footer With CSS.
(PS: wat is de code ook al weer om een codeblokje als html-code i.p.v. php-code weer te laten geven op dit forum?)
Gewijzigd op 02/06/2013 22:31:07 door Frank Conijn
Toevoeging op 02/06/2013 22:57:00:
Enne, het lijkt me niet echt het gewenste resultaat... http://codepen.io/WouterJ/pen/rihEw
Wouter J op 02/06/2013 22:51:38:
Kan op zich ook, al ben ik altijd een beetje huiverig om rootelementen te gaan inzetten als niet-rootelementen. Frank, waarom niet grandContainer vervangen door body?
Wouter J op 02/06/2013 22:51:38:
Ik zou niet weten waarom niet. Machiel stelt nadrukkelijk dat de header en de footer 100 px hoog moeten zijn en blijven, en dat het artikel en het zijvlak de overblijvende hoogte moeten krijgen. Dan krijg je bij een rootelementhoogte van 225 px inderdaad een heel kleine hoogte van het artikel. Maar wie verkleint zijn browser tot een hoogte van 225 px? Ik ga er daarbij van uit dat Machiel voor mobiele apparaten een andere lay-out heeft.Enne, het lijkt me niet echt het gewenste resultaat... http://codepen.io/WouterJ/pen/rihEw
Ik heb het even op codepen gezet/ http://codepen.io/seraphzz/pen/msrcJ
Machiel.
Dus je content zou zo opgebouwd moeten worden:
Code (php)
1
2
3
4
2
3
4
<div id="content">
<div id="links">blabla</div>
<div id="rechts">blablabla</div>
</div>
<div id="links">blabla</div>
<div id="rechts">blablabla</div>
</div>
dan zet je content 100%, links 75%, en rechts 25%.
Gewijzigd op 03/06/2013 17:39:14 door Keizer Webdesign
Wel bedankt voor het meedenken :)!