Simpel html layout

Door Dennis WhoCares op 13-06-2016 16:21 gewijzigd op 13-06-2016 16:33

2.746 views

Hi allemaal,

ik probeer een layout van me wat simpeler te maken ...
Het is heeeel simpel:
Header
Section
Footer

Header heeft een vaste hoogte, en Footer ook.
Nou moet de Section altijd de ruimte ertussen opvullen.
p.s. ik wil niet de pagina scrollen, maar alleen de Section indien nodig.
Als dit niet nodig is, mag dit dus ook niet

Omdat ik met vaste maten zit, heb ik een jquery script on.resize()
Die maakt de Section height: schermformaat - header height - footer height

Alleen, werkt dat ook niet echt helemaal 100, en heb ik af en toe zo'n stomme scroll bug
(voornamelijk op mobiel, dan kan ik de Section wel scrollen en dat levert alleen maar lelijke en irritante problemen

ik maak ook gebruik van vis.js en andere elementen welke dus het gehele formaat van section gaan gebruiken.)

Heeft iemand een goede oplossing voor mij?

Ariën

13-06-2016 16:39

Heb je een voorbeeld op Codepen.io of JSfiddle?

Ward van der Put

13-06-2016 16:40

Wil je een sticky header met een sticky footer combineren?
Dan kan dat gewoon met CSS, zonder JavaScript:


#header,
#footer,
#main {
  position: absolute;
  left: 0;
  right: 0;
}

#header {
  height: 100px;
  top: 0;
}

#footer {
  height: 100px;
  bottom: 0;
}

#main {
  top: 100px;
  bottom: 100px;
  overflow: hidden;
}

Met andere woorden: als header en footer beide een hoogte hebben van 100 pixels (height: 100px), dan plaats je de hoofdcontent 100 pixels vanaf de bovenrand (top: 100px) en de onderrand (bottom: 100px).

Dennis WhoCares

13-06-2016 16:55

Hi Ward,

thanks voor je reactie, heb het nog niet geprobeerd. Ga nu m'n spullen bij elkaar rapen en hop naar huis ;D
Zit nu met :
display: table-row
te spelen, maar weet nou niet zeker of dit wel de juiste 'nette' manier is ;-) het werkt wel :o

Als ik deze aanpak gebuik, is in jouw voorbeeld, #main altijd de gehele formaat tussen Header en Footer ?
Deed voorheen ook padding-top en bottom, maar dat werd ook niet echt mooi indien er gescrolled moet worden :P

Ward van der Put

13-06-2016 17:10

Dennis WhoCares op 13/06/2016 16:55:52

Als ik deze aanpak gebuik, is in jouw voorbeeld, #main altijd de gehele formaat tussen Header en Footer ?

Ja: de hoogte van header en footer bepalen de eigenschappen top en bottom voor het begin en het einde van #main. Wat je zelf al liet uitrekenen in JavaScript, kun je gewoon aan CSS overlaten.

Dennis WhoCares

13-06-2016 19:37

Enorm bedankt voor de uitleg Ward.
Was me niet van bewust dat ik in html/css ook 'springs' kan gebruiken
(kan in xCode ook, top en bottom opgeven. is gelijk responsive dan)

Thomas van den Heuvel

13-06-2016 20:59 gewijzigd op 13-06-2016 21:00

En wat nu als de content langer is dan een schermhoogte minus de hoogte van header + footer? Gaat die constructie dan ook goed?

Het kan ook anders.

Dennis WhoCares

13-06-2016 21:13

Thomas van den Heuvel op 13/06/2016 20:59:13

En wat nu als de content langer is dan een schermhoogte minus de hoogte van header + footer? Gaat die constructie dan ook goed?

Het kan ook anders.

Hi Thomas,

met overflow: auto werkt het prima, voor zover ik ff snel gekeken heb nu

Jouw oplossing met de padding, heeft bij mij eigenlijk nog nooit lekker gewerkt, en iOS gaat vervelend lopen 'bouncen' incl, de body background als 'fixed' (kan zijn dat ik iets fout doe of de overige objecten die ik daarna gebruik niet goed zijn :D)

Ik heb het nog niet op iOS getest, kom ik morgen wel aan toe op het werk.

Thomas van den Heuvel

14-06-2016 12:58

Ik kan mij vergissen, maar iOS is volgens mij een besturingssysteem, geen browser.

Dennis WhoCares

14-06-2016 12:59

Thomas van den Heuvel op 14/06/2016 12:58:03

Ik kan mij vergissen, maar iOS is volgens mij een besturingssysteem, geen browser.

Je kan je vergissen, maar in dit geval niet ;-)
idd bedoel ik daarmee dus de mobiele versie van Safari.

Deze vindt het leuk om de background te scrollen/'bouncen' ongeacht wat je instel in css.

Met dit script: https://github.com/lazd/iNoBounce is dat opgelost. :)

Reageren

Inloggen om te reageren