Samme høyde på kolonner i CSS

[Shopping-guiden]

Hei,

har følgende kode

<div class="klasse1">

     <div class="klasse2">INNHOLD 1</div>
     <div class="klasse3">INNHOLD 2</div>
     <div class="klasse4">INNHOLD 3</div>

</div>

Hvordan skal jeg da klare at hver kolonne er like høy? De ligger ved siden av hverandre med float:left; osv. Men sliter med at de får samme innhold(INNHOLD2 er mye lengre enn INNHOLD1 og 3) Vil altså at de stopper likt ved bunn.

Håper noen forstod hva jeg mente.

Takker for svar!

 

[TorsteinO]

Husker ikke 100% navnet her og nå, men lurer på om det er jquery equal heights eller noe i den duren. Bruker det på minioya.no og stoltmat.no, det setter samme høyde på alle childs av et element du velger

 

[Dag Frogner]

Det er uansett veldig mye enklere å hjelpe om du gir oss url til siden.

 

[Shopping-guiden]

Har ikke lagt ut noe foreløpig.

Takk for svar begge to, forsøker jquery da.

 

[clinton4]

Her har du svaret: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

 

[mathisfenne]

Alternativ med jQuery

Hei.
Du kan også gjøre det slik med jQuery.

<script>
$(function(){
/* Lik høyde*/
var likhoyde = Math.max.apply(null, $('.equal').map(function() {return $(this).height();}).get());
$('.equal').height(likhoyde);
});
</script>

Kort forklart så setter du klassen "equal" på de kolonnene på siden som skal ha lik høyde.

 

[adeneo]

@mathisfenne, det ser bra ut, gjorde det om til en plugin (det vil si Paul Irish gjorde det, jeg bare rappet det), og da ser det slik ut:

$.fn.setToMax = function(){return this.height(Math.max.apply(this, $.map(this, function(e){return $(e).height()}))); }

$(".equal").setToMax(); //enkelt å bruke

Slik ein fele må me ha : FELE

 

[rthorvald]

Ikke noe poeng i å bruke javascript når det klarer seg med CSS:

html{height:100%} 
body {height:100%;} 
.klasse1 {width:300px;background:yellow;height:50%;} 
.klasse2 {width:100px;background:orange;float:left;height:50%;}
.klasse3 {width:100px;background:blue;float:left;height:50%;}
.klasse4 {width:100px;background:green;float:left;height:50%;}

... Poenget her er at den innerste blokka arver egenskapene til blokka over. Height funker det, så lenge alle blokkene vet hvor høye foreldreblokka er.

I dette tilfellet bruker jeg %, men du kan like gjerne bruke absolutte mål - du må bare passe på at alle nivåene i nøstet har høydeangivelse.

Eksemplet over ender opp med at klasse2, 3 og 4 får 25% av hele sidens høyde ettersom de arver 50% av høyden til klasse1, som igjen arver 50% av høyden til body.

- rthorvald

 

[mathisfenne]

Det er jeg helt enig i!! Men har du mye på siden og ønsker å sette lik høyde på elementer på et sted på siden så er det både tidsbesparende og enkelt å bruke jQuery

Ikke noe poeng i å bruke javascript når det klarer seg med CSS:


... Poenget her er at den innerste blokka arver egenskapene til blokka over. Height funker det, så lenge alle blokkene vet hvor høye foreldreblokka er.



- rthorvald

 

[agrimsrud]

Når vi snakker om enkelt og tidbesparende, så er et alternativ er å bruke display:table og display:table-cell.

Fungerer riktignok ikke i IE6/7, men skal vises riktig i alle moderne nettlesere.

Har satt opp et eksempel på JSFiddle.