Virusscanner tips?
Simpel html layout
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?
Gewijzigd op 13/06/2016 16:33:11 door Dennis WhoCares
Dan kan dat gewoon met CSS, zonder JavaScript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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;
}
#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).
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
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.
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)
Het kan ook anders.
Gewijzigd op 13/06/2016 21:00:16 door Thomas van den Heuvel
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.
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 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. :)