[CSS] Float top & float bottom

[cyberstalker]

Ik weet dat css geen float top en bottom heeft, maar dit zou wel precies zijn wat ik nodig heb.

Ik heb drie vlakken boven elkaar. Het bovenste en het onderste vlak moeten exact de ruimte innemen die ze nodig hebben voor hun content. Het middelste vlak moet de overige beschikbare ruimte innemen. Deze kan dus groter zijn dan nodig, of te klein (en dus een scrollbar tonen).

Alle content is dynamisch, dus ik kan niet een vaste hoogte aan een van de vlakken toekennen.

Het middelste vlak moet dus 100% hoogte hebben, minus de hoogte van het bovenste en onderste vlak. Ik wil dit per se niet met javascript oplossen, omdat dan effecten die de grootte van een van de vlakken aanpast niet meer goed werken.

Een hele ranzige oplossing die ik heb gevonden is om de container, die om alle vlakken heen staat, een display: table te geven, alle vlakken zelf een display: table-row en de middelste een height: 100%. Dit werkt alleen niet goed in Internet Explorer. Voor dit project moet het, iig vanaf versie 8, goed werken.

[Bosmonster]

Hoogte is geen standaard onderdeel van je document. Een document kan een breedte hebben, maar de hoogte is dynamisch.

Je kunt dit met trucjes wel forceren, maar dat komt dan ongeveer neer op de bottom floating footer en daar is behoorlijk wat voor te vinden, zelfs op GoT.

[cyberstalker]

Dankjewel, ik heb nu ook gezocht op "bottom floating footer", maar daarbij geen nieuwe opties gevonden. Alle opties die ik tot nu toe ben tegengekomen zijn ervan afhankelijk dat de hoogte van de footer bekend is.

Ik kan nergens iets vinden dat specifiek de automatische hoogte gebruikt die de browser ervoor nodig heeft.

[Bosmonster]

De hoogte van de footer moet ook bekend zijn idd. Anders is het zonder javascript niet mogelijk.

[OkkE]

Frames

Misschien toch eens nadenken over een andere layout, want zoals je het nu beschrijft is het en niet mogelijk met CSS alleen en klinkt het als niet zo handig voor bezoekers met <=22" schermen.

Header vaste hoogte boven aan het scherm. Footer zo hoog als er inhoud is. En dan "wat overblijft" er tussen scrollen? Waarom moet de Footer altijd onder aan het scherm staan en niet onder aan de pagina? Als het zulke belangrijke informatie bevat, moet die informatie misschien een andere plaats krijgen?

[geert1]

Zoals Bosmonster zegt: Wat je hier nodig hebt is een sticky footer. Dit werkt het makkelijkst met een trucje die bijvoorbeeld hier wel aardig te zien is als testcase. Of hier in de praktijk toegepast. Geen vieze hacks, geen javascript, werkt in ie7+ (misschien ook 6, geen idee).

Edit: Ik lees net dat wat jij wilt nog gekker is, dat klinkt inderdaad een beetje op een frames-achtige benadering. Zou je met javascript onresize de hoogte moeten zetten van een middelste content-gebied, en dan de header en footer vast erboven en eronder zetten. Ik zou andere keuzes maken in het ontwerp om te komen tot een moderne opzet voor een website, want dit is naar mijn mening gewoon geen verstandige keuze.

Als je bijvoorbeeld al deze websites ziet, waarom wil je dan zoiets ouderwets opzetten als wat jij in gedachten hebt?

[ Voor 61% gewijzigd door geert1 op 04-10-2011 15:22 ]

[cyberstalker]

Omdat ik niet zoiets aan het opzetten ben, maar een bestaande, grote web-applicatie heb. Hierbij is wel gekozen voor een javascript-based oplossing. Dit geeft het probleem dat effecten niet vloeiend kunnen verlopen, of dat dat heel veel werk is, omdat alles opnieuw berekend moet worden.

Om deze reden wil ik dus zoveel mogelijk van deze scripts af die continue hoogtes en breedtes herberekenen. Dit moet echter zonder het design aan te passen.

[alex3305]

Kun je het anders proberen met behulp van bijvoorbeeld jQuery. Deze kan vaak animaties en berekeningen wat sneller uitvoeren dan eigen geschreven code.

[Bosmonster]

cyberstalker schreef op dinsdag 04 oktober 2011 @ 22:14:
Omdat ik niet zoiets aan het opzetten ben, maar een bestaande, grote web-applicatie heb. Hierbij is wel gekozen voor een javascript-based oplossing. Dit geeft het probleem dat effecten niet vloeiend kunnen verlopen, of dat dat heel veel werk is, omdat alles opnieuw berekend moet worden.

Om deze reden wil ik dus zoveel mogelijk van deze scripts af die continue hoogtes en breedtes herberekenen. Dit moet echter zonder het design aan te passen.

Dus resultaat van je analyse: Animaties niet mogelijk in huidige design en implementatie. Ben je gelijk ook een stuk sneller klaar

[cyberstalker]

Tja, was het maar zo makkelijk. Het zal er hoe dan ook toch moeten komen.

Omdat het blijkbaar echt niet mogelijk is met puur CSS (en ik heb de meest ranzige, smerige hacks geprobeerd), wil ik nu proberen om het met DOM events op te lossen.

IE biedt een resize event aan voor alle elementen, dus dat is makkelijk op te lossen. Andere browsers hebben dit niet (die bieden dat enkel op het hele window), dus wil ik hiervoor gebruik maken van DOMSubtreeModified. Dit werkt goed in Firefox, maar ik heb gemerkt dat webkit dit event niet afvuurt bij wijzigingen aan het style attribuut, wat uiteraard juist een van de belangrijkste attributen is in mijn geval.

Ik heb alle mogelijke mutation events geprobeerd die ik kon vinden (DOMSubtreeModified, DOMAttrModified, etc...) maar zonder resultaat. Weet iemand hier misschien een slimmere manier voor? Er is voor chrome al een bugreport gemaakt, maar dat is al een jaar oud en het lijkt er niet op dat dat snel opgelost gaat worden.

[Bosmonster]

cyberstalker schreef op woensdag 05 oktober 2011 @ 10:08:
Tja, was het maar zo makkelijk. Het zal er hoe dan ook toch moeten komen.

Omdat het blijkbaar echt niet mogelijk is met puur CSS (en ik heb de meest ranzige, smerige hacks geprobeerd), wil ik nu proberen om het met DOM events op te lossen.

IE biedt een resize event aan voor alle elementen, dus dat is makkelijk op te lossen. Andere browsers hebben dit niet (die bieden dat enkel op het hele window), dus wil ik hiervoor gebruik maken van DOMSubtreeModified. Dit werkt goed in Firefox, maar ik heb gemerkt dat webkit dit event niet afvuurt bij wijzigingen aan het style attribuut, wat uiteraard juist een van de belangrijkste attributen is in mijn geval.

Ik heb alle mogelijke mutation events geprobeerd die ik kon vinden (DOMSubtreeModified, DOMAttrModified, etc...) maar zonder resultaat. Weet iemand hier misschien een slimmere manier voor? Er is voor chrome al een bugreport gemaakt, maar dat is al een jaar oud en het lijkt er niet op dat dat snel opgelost gaat worden.

Die events zijn er niet of niet (goed) bruikbaar.

Javascript is je enige oplossing. Dus als jij bij een bedrijf werkt waar je expertise niet gewaardeerd wordt, dan kun je dus slaafs alles gaan scripten en het product nog verder om zeep helpen qua kwaliteit en onderhoudbaarheid...

Persoonlijk zou dat voor mij het einde van de arbeidsrelatie zijn, maar goed