Layout met nested divs en 100% height incl scrolling
Ik heb een vervelende layout waar ik op vast loop. Ik snap niet waar het op mis gaat en hoop dat iemand mij hier op weg kan helpen. Ik heb een hoop varianten geprobeerd maar krijg het niet voor elkaar. Ook niet met hulp van Stackoverflow.
Ik heb een layout met een
- top div (horizontaal 100%)
- container div (centered 980px)
----- left div (100% height)
----- right div (100% height)
- footer div (horizontaal 100%)
Nu gaat de 100% height mis op het moment dat er meer content in staat dan de hoogte van de body, zie voorbeeld: http://test.dev.artform.org/layout (even scrollen)
Edit: Ik heb een versie met jquery gemaakt, maar dit moet toch ook met plain html en css kunnen, zie: http://test.dev.artform.org/layout-jquery/
Wie legt mij uit hoe dit met plain html/css kan? (moet werken vanaf ie8).
Gr, Ken
Gewijzigd op 21/05/2014 14:56:00 door Ken PHP
Ward van der Put op 21/05/2014 14:58:51:
Het is met overflow: hidden in CSS op te lossen. Pas dit toe op de div zelf en de containers erboven, dus in principe alles met "overlopende" inhoud.
Ward, bedankt! Is het ook mogelijk een concreet voorbeeld te geven?
Edit: Dit is een volledige fix met jquery:
http://test.dev.artform.org/layout-jquery-fixed/
Iemand nog een oplossing voor plain html/css?
Gr, Ken
Gewijzigd op 21/05/2014 16:22:07 door Ken PHP
Tortuga web op 21/05/2014 19:08:39:
Precies zoals ward zegt, in je css bij het betreffende div-block. Het is de meest simpele oplossing.
Dan krijg ik idd dit:
http://test.dev.artform.org/layout-fix-css/
Maar met weinig text is het niet meer horizontaal 100%, zie zelfde als hierboven met minder text:
http://test.dev.artform.org/layout-fix-text/
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
56
57
58
59
60
61
62
63
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
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed footer, zonder Javascript</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
background: lightgrey;
font-size: 62.5%; /* standardiseert oudere IE's */
}
body {
font: normal 1.3em Verdana; /* tezamen met de 62,5% => 13px */
}
div#header {
height: 100px;
background: darkgreen;
color: white;
}
div#trunkContainer {
width: 980px;
margin: auto;
}
div#leftColumn {
width: 900px;
min-height: 1500px; /* dit is belangrijk */
float: left;
background: yellowgreen;
}
div#rightColumn {
width: 80px;
min-height: 1500px; /* en dit natuurlijk ook */
float: right;
background: red;
}
div#rightColumn:after {
content: '';
display: block;
clear: both;
}
div#footer {
height: 100px;
width: 100%;
background: darkgreen;
position: fixed;
bottom: 0;
color: white;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="trunkContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed footer, zonder Javascript</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
background: lightgrey;
font-size: 62.5%; /* standardiseert oudere IE's */
}
body {
font: normal 1.3em Verdana; /* tezamen met de 62,5% => 13px */
}
div#header {
height: 100px;
background: darkgreen;
color: white;
}
div#trunkContainer {
width: 980px;
margin: auto;
}
div#leftColumn {
width: 900px;
min-height: 1500px; /* dit is belangrijk */
float: left;
background: yellowgreen;
}
div#rightColumn {
width: 80px;
min-height: 1500px; /* en dit natuurlijk ook */
float: right;
background: red;
}
div#rightColumn:after {
content: '';
display: block;
clear: both;
}
div#footer {
height: 100px;
width: 100%;
background: darkgreen;
position: fixed;
bottom: 0;
color: white;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="trunkContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
En als je een wat meer afgepaste hoogte wilt, is hier een code met een simpel vanille Javascript, ook bruikbaar als je andere hoogtes voor de Header en/of Footer gaat instellen:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed footer, met vanille Javascript</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
background: lightgrey;
font-size: 62.5%; /* standardiseert oudere IE's */
}
body {
font: normal 1.3em Verdana; /* tezamen met de 62,5% => 13px */
}
div#header {
height: 100px;
background: darkgreen;
color: white;
}
div#trunkContainer {
width: 980px;
margin: auto;
}
div#leftColumn {
width: 900px;
float: left;
background: yellowgreen;
}
div#rightColumn {
width: 80px;
float: right;
background: red;
}
div#rightColumn:after {
content: '';
display: block;
clear: both;
}
div#footer {
height: 100px;
width: 100%;
background: darkgreen;
position: fixed;
bottom: 0;
color: white;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="trunkContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
<div id="footer">Footer</div>
<script>
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var remainingHeight = screen.height - headerHeight - footerHeight;
var w3schools_dot_com = 1;
var bad = -1;
if (w3schools_dot_com != bad) {
document.getElementById('leftColumn').style.minHeight = remainingHeight+'px';
document.getElementById('rightColumn').style.minHeight = remainingHeight+'px';
}
else {
alert('Had Wouter toch gelijk! ;-)');
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed footer, met vanille Javascript</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
background: lightgrey;
font-size: 62.5%; /* standardiseert oudere IE's */
}
body {
font: normal 1.3em Verdana; /* tezamen met de 62,5% => 13px */
}
div#header {
height: 100px;
background: darkgreen;
color: white;
}
div#trunkContainer {
width: 980px;
margin: auto;
}
div#leftColumn {
width: 900px;
float: left;
background: yellowgreen;
}
div#rightColumn {
width: 80px;
float: right;
background: red;
}
div#rightColumn:after {
content: '';
display: block;
clear: both;
}
div#footer {
height: 100px;
width: 100%;
background: darkgreen;
position: fixed;
bottom: 0;
color: white;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="trunkContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
<div id="footer">Footer</div>
<script>
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var remainingHeight = screen.height - headerHeight - footerHeight;
var w3schools_dot_com = 1;
var bad = -1;
if (w3schools_dot_com != bad) {
document.getElementById('leftColumn').style.minHeight = remainingHeight+'px';
document.getElementById('rightColumn').style.minHeight = remainingHeight+'px';
}
else {
alert('Had Wouter toch gelijk! ;-)');
}
</script>
</body>
</html>
Gewijzigd op 23/05/2014 08:00:36 door Frank Conijn
Bedankt voor je input!
Op basis van je input heb ik een final jquery versie gemaakt (aangezien jquery vereist is in dit project).
Het resulaat staat hier: http://test.dev.artform.org/layout-fixed/
Ik denk dat bovenstaande link de beste versie is. Bedankt iedereen!
Gr, Ken
Het resultaat ziet er op zich goed uit, maar je javascript is veel ingewikkelder dan nodig. En ook je CSS-code kan nog wat 'leaner'. Zo heb je de overflow-bepaling niet nodig in deze omstandigheden, en ook de coördinaten van de div#Header heb je niet nodig.
Mocht je mijn code, aangepast aan het schaduweffect en de veranderde breedtes, nog een keer willen zien, dan moet je dat even aangeven. Dan post ik hem nog een keer.
Bedankt voor je feedback! Ik sta zeker open voor extra suggesties. Never to old to learn :)
Thanks!
Gr, Ken
Ik heb de code op Codepen gezet: http://codepen.io/anon/pen/msFLI?editors=100. Je moet de balk halverwege de pagina even omhoog schuiven en de CSS- en JS-paneeltjes minimaliseren om e.e.a. goed te kunnen zien.
Hij verschilt niet veel van de andere code die ik eerder postte, maar dit is de meest universele en 'lean' code. Van jQuery heb ik niet veel verstand omdat ik alles wat ik wil met basis-JS kan doen, maar ik vraag me af waarom je hiervoor jQuery zou willen gebruiken? Voor de lay-out is het bepaald niet nodig. En zelfs als je jQuery om andere redenen toch zou willen gebruiken, lijkt me de on-page jQuery-code die je hebt veel ingewikkelder dan nodig. Maar je zou anderen moeten vragen hoe dat simpeler kan.
Gewijzigd op 26/05/2014 14:52:17 door Frank Conijn
Sorry dat ik zo laat reageer, maar nog bedankt voor je reactie!
Ziet er op zich goed en duidelijk uit. Het verschil alleen is dat mijn code een event heeft op het vergroten en verkleinen van de window, dus $(window).on('resize',functie). Mijn JS berekend dan opnieuw de dimensies. Verder maakt mijn code eerste de linker en rechter column gelijk en bekijkt dan of er nog hoogte mist t.o.v. de parent div.
Voor wat betreft jQuery, dit is vereist om bepaalde HTML5 en JS features eenvoudig op oudere browsers en devices werkend te krijgen.
Groetjes, Ken