[HTML/CSS]Bootstrap container pagina vullend

[Jboy1991]

Goedendag.

Ik loop enorm vast op een stukje CSS i.c.m html -> bootstrap.

Het layout/template dat ik heb gemaakt bestaat uit het volgende:

Header over de hele breedte van de pagina
In het midden van de header zon 60px van de linker zijkant zit het menu.

Nu wil ik onder het menu direct het content hebben (container).
Dus ik heb het volgende

code:

body > .container {
  padding: 60px 15px 0;
min-height: 100%;
    background-color:#f2f2f2;
}

Nu is het probleem:
De footer blijft altijd mooi beneden aan de pagina. Alleen de achtergrond van het container STOPT wanneer er geen meer inhoud is.

Dus als ik bijv enkel een alert laat zien. Krijg je de achtergrond alleen TOT het einde van de alert en de rest is gewoon de body achtergrond.

Iemand enig idee hoe de hoogte van de container aansluitend krijg aan de footer.

MET

code:

html,body {height:100%;}

Krijg ik het wel vullend alleen dan is het probleem dat je altijd een scroll balk houdt en dus altijd moet scrollen om het copyright gedeelte te zien

[NMe]

Even min-height: calc(100vh - hoogte_header - hoogte_footer) op je content gooien.

[Jboy1991]

NMe schreef op vrijdag 7 april 2017 @ 11:36:
Even min-height: calc(100vh - hoogte_header - hoogte_footer) op je content gooien.

Bedankt voor het mee denken Maar ook dit helpt niet.

Nu is de pagina wel is waar meer gevuld alleen blijft tussen het content en de footer een witte balk

code:

body > .container {
  padding: 60px 15px 0;
      background-color:#f2f2f2;
      
    height: -moz-calc(100vh - (60px + 60px));
    height: -webkit-calc(100vh - (60px + 60px));
    height: calc(100vh - (60px + 60px));

}

En als de pagina verkleint is:



Update:
Inmiddels die gat kunnen fixen met

code:

body > .container {
  padding: 60px 15px 0;
      background-color:#f2f2f2;
      height:100%
    min-height: -moz-calc(100vh - (60px + 60px));
    min-height: -webkit-calc(100vh - (60px + 60px));
    min-height: calc(100vh - (60px + 60px));

Enige wat ik nu krijg is het volgende:



Inmiddels lijkt het probleem opgelost:

code:

body > .container {
  padding-top: 20px;


      background-color:#f2f2f2;

    min-height: -moz-calc(100vh - 120px);
    min-height: -webkit-calc(100vh -120px);
    min-height: calc(100vh - 120px );
}

[ Voor 44% gewijzigd door Jboy1991 op 07-04-2017 12:42 ]

[NMe]

Waarom die vendor prefixes? http://caniuse.com/#feat=calc

[Jboy1991]

NMe schreef op vrijdag 7 april 2017 @ 12:44:
Waarom die vendor prefixes? http://caniuse.com/#feat=calc

Ik wist niet dat er een calc functie bestond dus na jouw antwoord ben ik erop gaan googlen. En las op verschillende foras dat het verstandig is om het zo te doen. Zodat je zeker weet dat het bij alle (meest gebruikte) browsers werkt. En baat het niet dan schaad het niet toch ?

[NMe]

Het is compleet archaïsch. CSS is heel erg veranderd in de afgelopen 5 jaar en de meeste dingen die je online vindt zullen advies geven dat niet meer per se courant is. Als je vendor prefixes wil gaan gebruiken is het handig om eerst even te checken op caniuse.com of dat eigenlijk nog wel nodig is. Deze feature specifiek werkt al unprefixed sinds 2013 in elke belangrijke browser.

[BarôZZa]

Is die rechterzijde altijd even hoog? Want dan kan je dat containergedeelte een min-height van die hoogte geven waardoor het er altijd onderuit komt.

Of min-height: 100vh;

Beste manier is overigens flexbox, dat is gemaakt voor dit soort scenario's.

Krijg ik het wel vullend alleen dan is het probleem dat je altijd een scroll balk houdt en dus altijd moet scrollen om het copyright gedeelte te zien

Altijd een scrollbar is beter dan op sommige pagina's wel en op andere niet, omdat anders de content kan verspringen van pagina tot pagina. Overigens boeit niemand die copyright wat dus uit het zicht houden is altijd prima.