Layout met nested divs en 100% height incl scrolling

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ken PHP

Ken PHP

21/05/2014 14:47:05
Quote Anchor link
Beste HTML'ers,

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
 
PHP hulp

PHP hulp

14/04/2024 07:48:28
 
Ward van der Put
Moderator

Ward van der Put

21/05/2014 14:58:51
Quote Anchor link
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.
 
Ken PHP

Ken PHP

21/05/2014 15:32:37
Quote Anchor link
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

tortuga web

21/05/2014 19:08:39
Quote Anchor link
Precies zoals ward zegt, in je css bij het betreffende div-block. Het is de meest simpele oplossing.
 
Ken PHP

Ken PHP

21/05/2014 20:38:59
Quote Anchor link
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/
 
Frank Conijn

Frank Conijn

23/05/2014 04:37:15
Quote Anchor link
Dat kan met veel minder en met veel eenvoudigere code, geheel zonder Javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 23/05/2014 08:00:36 door Frank Conijn
 
Ken PHP

Ken PHP

23/05/2014 16:07:01
Quote Anchor link
Hey Frank,

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
 
Frank Conijn

Frank Conijn

24/05/2014 14:42:26
Quote Anchor link
Beste 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.
 
Ken PHP

Ken PHP

24/05/2014 18:15:18
Quote Anchor link
Hoi Frank,

Bedankt voor je feedback! Ik sta zeker open voor extra suggesties. Never to old to learn :)

Thanks!

Gr, Ken
 
Frank Conijn

Frank Conijn

26/05/2014 14:48:14
Quote Anchor link
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
 
Ken PHP

Ken PHP

28/05/2014 08:09:31
Quote Anchor link
Hoi Frank,

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.