PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Layout met nested divs en 100% height incl scrolling

Door Ken PHP op 21-05-2014 14:47 gewijzigd op 21-05-2014 14:56
2.536 views
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
Ward van der Put
21-05-2014 14:58
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
21-05-2014 15:32 gewijzigd op 21-05-2014 16:22
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
tortuga web
21-05-2014 19:08
Precies zoals ward zegt, in je css bij het betreffende div-block. Het is de meest simpele oplossing.
Frank Conijn
23-05-2014 04:37 gewijzigd op 23-05-2014 08:00
Dat kan met veel minder en met veel eenvoudigere code, geheel zonder Javascript: 

<!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: 

<!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>

Ken PHP
23-05-2014 16:07
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
24-05-2014 14:42
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
24-05-2014 18:15
Hoi Frank,

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

Thanks!

Gr, Ken
Frank Conijn
26-05-2014 14:48 gewijzigd op 26-05-2014 14:52
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.
Ken PHP
28-05-2014 08:09
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

Reageren

Inloggen om te reageren