DIV dynamisch ruimte laten opvullen tussen header en footer. - Softwareontwikkeling

vrijdag 17 februari 2017 15:08

Acties:

0 Henk 'm!

Twentse Boer en ICT'er

Topicstarter

Ik bezig om HTML & CSS te leren maar ergens kom ik niet helemaal uit met mijn layout.

De content div moet standaard alleen de beschikbare ruimte tussen de header en de footer netjes opvullen zonder buiten het venster te gaan.
Alleen als de content in de DIV groter is dan die beschikbare ruimte moet de div groter worden en de footer buiten het scherm drukken.

Ik heb al een flex & table-row oplossing geprobeerd zoals aangegeven op google maar niets werkt

Heeft iemand een suggestie over hoe ik dit kan realiseren ?

De HTML code:

code:

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" style type="text/css" href="style.css">
  </head>
  <body>
<div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>
  </body>
</html>

De CSS code:

code:

    html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

.wrapper {
    height: 100%;
    width: 60%;
    min-width: 900px;
    margin: auto;
}

.header {
    height: 150px;
    width: 900px;
    position: relative;
    background-color: yellow;
}

.content {
    width: 900px;
    height: auto;
    min-height: 100%;
    position: relative;
    background-color: grey;
}
    
.footer {
    height: 25px;
    width: 900px;
    position: relative;
    bottom: 0;
    background-color: red;
}

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

vrijdag 17 februari 2017 15:18

Acties:

0 Henk 'm!

Demonitzu

Incidentele gebruiker

Als ik je goed begrijp, heb je dit nodig:

code:

1
2
3

.wrapper {
    min-height: 100vh;
}

TekkenZone - Dutch Tekken Community

vrijdag 17 februari 2017 15:23

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Daarmee heb je nog niet de footer onderaan staan.

Als je header en footer een vaste hoogte hebben is het makkelijker, dan gooi je bijvoorbeeld een height van 100px op de header, een van 200px op de footer en een min-height van calc(100vh - 100px - 200px) op de content.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 17 februari 2017 15:31

Acties:

0 Henk 'm!

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

Dat met die 100vh had ik al eerder gelezen, het doet echter niets.
De content is dan nog maar 100px hoog ofzo en niet 100% van de beschikbare ruimte

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

vrijdag 17 februari 2017 15:33

Acties:

0 Henk 'm!

Lapa

NMe schreef op vrijdag 17 februari 2017 @ 15:23:
Daarmee heb je nog niet de footer onderaan staan.

Als je header en footer een vaste hoogte hebben is het makkelijker, dan gooi je bijvoorbeeld een height van 100px op de header, een van 200px op de footer en een min-height van calc(100vh - 100px - 200px) op de content.

Goede oplossing volgens mij. Je hebt dan die hele wrapper div niet eens nodig. Calc en de 'vh' en gerelateerde eenheden zijn echt een uitkomst, TS mag blij zijn dat hij begint in het tijdperk dat dit bestaat. Alleen jammer dat als je googelt op dit soort problemen, je nog vooral 'ouderwetse' oplossingen vindt.

vrijdag 17 februari 2017 15:38

Acties:

0 Henk 'm!

Lapa

Trekkerkearl schreef op vrijdag 17 februari 2017 @ 15:31:
Dat met die 100vh had ik al eerder gelezen, het doet echter niets.
De content is dan nog maar 100px hoog ofzo en niet 100% van de beschikbare ruimte

Zie deze jsfiddle die ik even heb gemaakt als proof of concept:

https://jsfiddle.net/he3z47cj/

Het werkt met de oplossing die NMe (ongeveer) aandraagt, zelfs zonder wrapper.

vrijdag 17 februari 2017 15:40

Acties:

+1 Henk 'm!

NMe

Quia Ego Sic Dico.

Lapa schreef op vrijdag 17 februari 2017 @ 15:38:
[...]

Zie deze jsfiddle die ik even heb gemaakt als proof of concept:

https://jsfiddle.net/he3z47cj/

Het werkt met de oplossing die NMe (ongeveer) aandraagt, zelfs zonder wrapper.

Ik heb net hetzelfde lopen doen.

https://jsfiddle.net/ods6fbon/2/

Maar dan met beter geschikte elementen, trouwens.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 17 februari 2017 15:55

Acties:

0 Henk 'm!

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

in Chrome & Firefox lijkt het wel te werken maar IE werkt de layout dan helemaal niet meer.
Grappig dat ik de hele dag al bezig was maar nog niet op het idee was gekomen een andere browser te proberen :-)

Iemand nog een suggestie hoe dit in IE kan... 100fh werkt dan niet goed.

[ Voor 35% gewijzigd door Trekkerkearl op 17-02-2017 16:01 ]

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

vrijdag 17 februari 2017 16:05

Acties:

0 Henk 'm!

Lapa

Welke IE versie dan? Vanaf IE9 zou dit gewoon prima moeten werken.Of toont jouw IE de lokale pagina in "compatibiliteitsmodus"?

Doe even F12 in IE, en kijk dan in de tab 'emulatie' of de documentmodus op Edge staat.

vrijdag 17 februari 2017 16:19

Acties:

0 Henk 'm!

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

zucht

, het stond inderdaad op 7 en niet op Edge....mijn werkgever heeft dit standaard zo ingesteld staan

het werkt nu eindelijk zoals ik verwacht had... bedankt iedereen,

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

Pagina: 1

Reageer