Table lay-out scrollable 100% cell

[Erwin537]

Beste,

Ik heb een table layout met divs gemaakt om zo de outlook 2013 interface min of meer na te bouwen. Zo komt er een ribbon in en is het de bedoeling dat er 2 (mogelijk meer) panelen onder komen waarmee dynamische de breedte aangepast kan worden.

Op dit moment heb ik mijn table lay-out als volgt:
http://jsfiddle.net/MZmfW/

Wat ik echter wil bereiken is dat beide panelen kunnen scrollen zoals dit bij dit voorbeeld met absolute positionering mogelijk is:
http://jsfiddle.net/rTfVb/1/

Nu kan ik natuurlijk gewoon de tweede optie met absolute gepositioneerde elementen gebruiken, maar dit vind ik vrij dirty en als ik er slidable frames van wil maken, moeten er veel meer waardes aangepast worden dan bij de table lay-out. Ook is het toevoegen van meerdere kolommen makkelijker bij de table lay-out variant.

Weten jullie een manier om de panelen scrollbaar te maken? Ik heb reeds gezocht op "scrollable table cell percentage height" en variaties daar op. Echter blijf ik met het probleem zitten.

Ik zou nog de hoogte van de pagina met javascript kunnen achterhalen en het daar mee in vullen; met een fixed hoogte zou het namelijk wel moeten lukken. Ik heb echter het gevoel dat het wel moet kunnen zonder javascript.


EDIT: Net een testje gedaan met table layout en javascript hoogte toevoegen, maar dat lijkt niet te werken. Pas als ik display: table; uit zet werkt het.

EDIT2: Zag dat ik perongeluk een foutje had gemaakt met JSfiddle opslaan. Nu zou het moeten kloppen.

[ Voor 8% gewijzigd door Erwin537 op 20-12-2012 10:17 ]

[_Thanatos_]

Ik zeg nog steeds dat je dit niet met een table moet doen. Dat geeft meer kopzorgen dat je je nu kan bedenken. Wat bijvoorbeeld als de layout adaptable moet worden, dat krijg je met tabellen niet voor elkaar. Daarnaast is een tabel simpelweg niet het element dat je voor layout gebruikt, maar voor tabulaire data. De lijst met e-mails die je in de outlook-layout ziet, dat mag een tabel zijn (hoewel je ook een <ul> zou kunnen bedenken)

Je kunt de twee kolommen gewoon opmaken als divs met procentuele breedte. Niks mis mee. Absoluut positioneren kom je wrs wel op uit, maar wat is daar het probleem aan? Het is juist flexibeler, en als bonus ook nog adaptable.

[ Voor 3% gewijzigd door _Thanatos_ op 20-12-2012 13:05 ]

[Erwin537]

_Thanatos_ schreef op donderdag 20 december 2012 @ 13:04:
Ik zeg nog steeds dat je dit niet met een table moet doen. Dat geeft meer kopzorgen dat je je nu kan bedenken. Wat bijvoorbeeld als de layout adaptable moet worden, dat krijg je met tabellen niet voor elkaar. Daarnaast is een tabel simpelweg niet het element dat je voor layout gebruikt, maar voor tabulaire data. De lijst met e-mails die je in de outlook-layout ziet, dat mag een tabel zijn (hoewel je ook een <ul> zou kunnen bedenken)

Je kunt de twee kolommen gewoon opmaken als divs met procentuele breedte. Niks mis mee. Absoluut positioneren kom je wrs wel op uit, maar wat is daar het probleem aan? Het is juist flexibeler, en als bonus ook nog adaptable.

Het is geen tabel he, het is een table layout. Dus het is met div's die de display waarde table/table-row/table-cell mee krijgen. Op het moment heb ik het allemaal absoluut gepositioneerd en eigenlijk werkt dat nu wel goed. Ik zou het eigenlijk nog moeten testen op mobile devices en de slider implementeren, maar denk dat dit wel de weg is om te gaan.

Ik begin toch steeds meer te twijfelen aan de mogelijkheid met een table-layout.

[Anoniem: 2935]

Een op display:table gebaseerde layout kan nooit hetzelfde als tables omdat je geen col en rowspan hebt.

Er is overigens helemaal niks vies aan absolute positionering, sterker nog, het is een van de meest consistent ondersteunde layout technieken.

http://jsfiddle.net/mennovanslooten/5N8b7/

[Erwin537]

Anoniem: 2935 schreef op donderdag 20 december 2012 @ 13:45:
Een op display:table gebaseerde layout kan nooit hetzelfde als tables omdat je geen col en rowspan hebt.

Dat klopt inderdaad wel. Maar ik hoef nu in principe geen col/rowspan te hebben.

Er is overigens helemaal niks vies aan absolute positionering, sterker nog, het is een van de meest consistent ondersteunde layout technieken.

http://jsfiddle.net/mennovanslooten/5N8b7/

Je hebt inderdaad gelijk denk ik. Absoluut positioneren is hier gewoon op z'n plaats.

[_Thanatos_]

Absoluut positioneren is hier gewoon op z'n plaats.

Mooie woordspeling