Gedaan met de faux kolommen
Als je begint met de uitvoering van de lay-out van een website met CSS en HTML DIV, zal je onvermijdelijk tegenkomt het volgende probleem:
Hoe kan ik twee kolommen van kracht worden van dezelfde hoogte?
Wil je iets als dit:
Maar wat je ook doet, je bent niet in staat om de zijbalk tot de voettekst te breiden. U sluit af met iets als dit:
Velen hebben gesuggereerd met behulp van enkele lastige CSS-technieken om het probleem te omzeilen, terwijl het in feite geen enkele van de technieken werken perfect in alle gevallen. Het is vervelend om deze methoden werken in vele situaties.
Sommigen hebben gesuggereerd technieken, zoals het betegelen van een achtergrondafbeelding aan een verkeerde indruk van de lange kolommen geven. Deze techniek heet faux kolommen . Deze hack werkt bijna, maar u weet - het is een vuile hack ook.
Mensen verachten altijd met behulp van een JavaScript-gebaseerde oplossing voor dit probleem. Ik weet niet waarom, maar laat me je vertellen van de waarheid - een JavaScript-gebaseerde oplossing voor dit probleem is niet slechter dan elke andere oplossing. In feite als u gebruik maakt van JavaScript, kunt u het opslaan van een paar uur frustratie van het proberen om dingen werkend te krijgen. Mensen zullen u waarschuwen tegen dit door te zeggen: "Wat zal er gebeuren als de gebruiker JavaScript uitgeschakeld?". Geloof me, als de gebruiker JavaScript heeft uitgeschakeld, het grootste deel van het web is gebroken toch voor hem. De zijbalk doet er niet toe om hem. Doe niet alsof zoals het hoort.
Hier is hoe kunt u het probleem te omzeilen met behulp van jQuery:
Doe iets als dit in je klaar event handler:
$ (". Kadertekst '). Hoogte (Math.max ($(". inhoud"). Hoogte (), $ (". Zijbalk"). Hoogte ())); Dat is het. Nu beginnen Getting Things Done in plaats van knutselen met al die kleine details, en proberen te stoppen met CSS te gebruiken om voor alle gekke probleem op te lossen.
Ik ben het met u volledig. Mensen richten zich te veel op de doe het op de juiste manier doen in plaats van op de OK-manier die niet zal een week duren. Voor hen zeg ik Stop zorgwekkend gaan doen!
Betekent dit werken zoals het hoort, of heb je een beetje van de code om venster van grootte veranderen, het lettertype vergroten of verkleinen handvat toe te voegen, wanneer de tekst in "inhoud" is kleiner dan de tekst in "sidebar", enz.?
Oeps, vergeten een ander punt: ik heb gebruikt dat soort techniek, maar zonder jQuery, en ik heb er een probleem: terwijl ik resizing Firefox-venster, Javascript niet "resize" evenementen, dus de lay-out is geknoeid ontvangen up. Zodra u klaar bent met het aanpassen van de ruiten, het werkt wel.
IIRC IE niet over deze bug.
Goed punt Fabien, ik denk dat je zou hebben om gevallen waar $ (handle ". Kadertekst '). Hoogte ()> $ (". Content "). Hoogte () anders is de zijbalk zal worden afgekapt en zie je niet al haar inhoud.
Bedankt voor de pointer. Een van mijn cliënten geconfronteerd met dit probleem en moest ik creatief in het helpen van hen. Leuk om te weten dat ik niet alleen was.
Ik probeer normaal gesproken om de layout met CSS problemen vast te stellen, heb ik eigenlijk nooit aan gedacht voordat met behulp van een JQuery. Ik heb zeker de zijbalk probleem geweest! Zal proberen dit in de toekomst, dank je.
Michel,
Ik heb bijgewerkt op de code aan uw bezorgdheid.
Hi!
De eenvoudigste oplossing vond ik, na heel veel onderzoek enkele maanden geleden, is het gebruik van tabellen
Er zijn dingen die kunnen worden gedaan met DIV's, en in situaties waar DIV's werken prima, maar we moeten het onder ogen zien. Wilt u een lay-out zonder hacks te maken, tabellen zijn de beste.
Ik denk dat een schreef een post over dit enkele maanden geleden:
http://www.codigomanso.com/en/2009/02/should-i-use-tables-for-layout/
Hoe dan ook, is als het probleem met de door u genoemde Fibonacci. U kunt recursie gebruiken, maar serieus, als je van plan om meer dan de 30e nummer te berekenen, wat je hebt te gebruiken is een "voor". Zelfs als u alleen het 10e nummer.
Echt interessante blog, ik ben echt genieten!