webForumDet fria alternativet

2-kolumns div-layout – lika höjd oavsett innehåll.

HTML & CSS

5 svar · 2 028 visningar · startad av K@llen

Medlem sedan mars 20032 667 inlägg
Frågan#1

Hejsan,

Jag har en sida som ser ut så här:
http://sundara-massageterapi.se/referenser/

Jag slumpar fram x antal referenstexter. Dessa texter är av varierad längd.

Hur kan jag få båda kolumnerna lika höga där höjden är baserad på den kolumn som har mest innehåll?

Tacksam för idéer. (y)

Medlem sedan mars 2006296 inlägg
#2

Hej!

Det finns flera sätt att göra det på. Det jag använder mest är det här:
http://jsbin.com/osuhef/1/edit

Den högra kolumnens längd förlängs rejält men det som är längre än den vänstra kolumnen döljs. (testa ta bort overflow hidden på wrappern i exemplet) Skulle den högra kolumnen vara högre än vänstra gör inte det något eftersom wrappern ändå har samma bakgrund. Äsch, va tramsigt det blir när jag försöker förklara. Titta på exemplet istället. :)

Medlem sedan juni 20019 519 inlägg
#3

Vilka webbläsare skall du ha stöd för?

Medlem sedan mars 20032 667 inlägg
#4

voigtann1 skrev:

Vilka webbläsare skall du ha stöd för?

De jag testat på nu är:
Safari, M FF, Opera, Chrome på Mac.

Och

IE, M FF, Opera, Chrome på windows.

Hade varit bra med fortsatt stöd för dessa.

Medlem sedan mars 20032 667 inlägg
#5

Nate.A skrev:

Hej!

Det finns flera sätt att göra det på. Det jag använder mest är det här:
http://jsbin.com/osuhef/1/edit

Den högra kolumnens längd förlängs rejält men det som är längre än den vänstra kolumnen döljs. (testa ta bort overflow hidden på wrappern i exemplet) Skulle den högra kolumnen vara högre än vänstra gör inte det något eftersom wrappern ändå har samma bakgrund. Äsch, va tramsigt det blir när jag försöker förklara. Titta på exemplet istället. :)

Tack, får kolla. :)

Medlem sedan aug. 20068 090 inlägg
#6

Det finns olika knep, bl.a. med css tables. Sök på t.ex. "equal columns height".
Förr hade pvii.com ett skript som fixade detta också. Kolla där.

260 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)