max-height

Siden er opdateret 10. 12. 2011

Skal man have en tekstboks, hvor indholdet kan variere, men hvor højden af andre årsager ikke må overstige en given størrelse, kan man sætte en maksimal højde på boksen.

Hvis indholdet er mindre en denne maksimale højde, bliver boksens højde automatisk nedjustered der efter.

I Mozilla og Opera er det fuldt tilstrækkeligt, at indsætte attributten max-height og tildele en passende størrelse til denne. Dette kan gøres i et stylesheet eller med inline-css.

<p style="width: 300px; max-height: 60px; overflow:auto;">Noget tekst</p>
Her skal vi så have noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst, noget tekst
Her er en kort tekst

De to bokse her over er defineret med samme kode, men den nederste af dem har ikke indhold nok til at komme op på den maksimalt tilladte højde på 60 pixels.

Desværre forstår Internet Explorer ældre end 7 ikke max-height, selv om det er en del af css2-standarden. Derfor har jeg lavet et lille 'hack'. Det kan dog kun bringes til at virke fra et stylesheet - i sidens head eller en ekstern css-fil:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#maxi {
height:expression(
  this.scrollHeight > 60? "60px" : "auto" );
  }
</style>
<![endif]-->

Dette skal indsættes i sidens head og så svares til denne kode i html:

<p id="maxi">Noget tekst</p>

Koden definerer (i nederste linje), at hvis indholdet er højere end 60 px højt, skal div'en være 60px høj og der kommer en lodret scrollbar. Er indholdet mindre end 60 px, er højden sat til auto.

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2005

Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - max-height
sidens top
Brugere lige nu: 1
Home Mail