Min-height Min-width & Max-width Max-height

I CSS 2 ingår några egenskaper som kan vara väldigt användbara när man skapar layouter: min-height, min-width, max-width och i viss mån max-height.

De infogas precis på samma sätt som "width" och "height" och är särskilt användbara för layouter där man blandar fasta och flytande enheter.

Allt skulle vara frid och fröjd om nu bara Internet Explorer fungerade som webläsare gör mest... Men Internet Explorer - fram till och med version 6 - klarar inte av att tolka de här egenskaperna.

Därför måste man ta till några knep om man vill få det att fungera för de flesta besökarna på websidan.

Inledning

Med egenskaperna min-width och min-height bestämmer man "minsta-storlek" på t.ex. en box. Boxen kan ha en bestämd bredd / höjd eller anpassa sig efter innehållet / omgivningen.

Men om boxen har lite innehåll - eller om man förminskar texten - kommer boxen aldrig att bli mindre än vad som angivits i "min-width" eller "min-height".

Det här är mycket användbart för att förhindra att en hel layout krymper till oigenkännlighet om man t. ex. förminskar texten manuellt.

Egenskaperna max-width och max-height fungerar likadant - fast tvärtom...

Här kan man styra så att inte en layout växer till oigenkännlighet om den visas med väldigt hög upplösning - samtidigt som den kan anpassa sig om man har en lite lägre.

Min-width - minimi-bredd
Min-height - minimi-höjd
Max-width - max-bredd
Max-height - max-höjd

Vidare följer beskrivning över hur egenskaperna Min-height, Min-width, Max-width och Max-height fungerar och en del trix man kan ta till för att få samma effekt även i Internet Explorer.

Men i Internet Explorer 7 kommer de här egenskaperna att tolkas korrekt... Så det gäller att inte ta till såna "hack" som gör att sidan brakar ihop när de flesta gått över till den nya versionen.

Om några år, när IE 6 har gått i graven, kan man sluta bekymra sig över det här... Men till dess...

 Till Toppen 

Conditional comment för Internet Explorer

Något som mitt i eländet faktiskt är bra med Internet Explorer är att Microsoft tydligen vet med sig att deras webläsare har en del brister. De har nämligen uppfunnit något som kallas: Conditional comment. Främst är det väl till för att man ska anpassa sin websida så att den ska fungera i även lite äldre versioner av IE.

Det fungerar så att man infogar en kommentar i sidans huvud där man kan skriva in kod som bara läses av IE. Man kan också ange vilka olika versioner av webläsaren man vill ska nappa på just den koden.

Det här är mycket användbart! På så sätt kan man nämligen undvika en massa trassliga hack och i stället på ett helt korrekt sätt låta IE få en egen kod som inte påverkar andra webläsare som tolkar orginalkoden korrekt.

Så här fungerar det

Man länkar alltså till sin stilmall precis som vanligt i sidans huvud mellan <head> och </head> - det går också bra att skriva in css'en direkt i sid-huvudet.

Nedanför skriver du sedan in kommentaren som bara IE kan tolka.

Exempel 1

Så här skulle det kunna se ut med en sådan kommentar som läses av ALLA versioner av IE - men inga andra webläsare:

<html>
<head>
<title>Min Sida</title>

<link rel="stylesheet" href="stilmall.css" type="text/css">

<!--[if IE]>
<style type="text/css">
:: Här skrivs CSS-koden ::
</style>
<![endif]-->

</head>
<body> : : </body>
</html>

Exempel 2

Så här ser det ut om man vill att alla som använder IE av en TIDIGARE version än 7 ska omfattas av kommentaren (det som kommer att bli mest användbart fortsättningsvis):

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie456.css" type="text/css">
<![endif]-->

Läs mer om Conditional comments för IE här: Quirksmode.org / Conditional comment

 Till Toppen 

Min-height

Min-height används för att ange en minimi-höjd på t.ex. en box. Det innebär att - vad som än händer - kommer boxen aldrig att bli mindre - på höjden - än det mått du angivit i "min-height".

Användningsområden & Exempel

Låt oss förutsätta att en sidas hela layout är uppbyggd av boxar och att utseendet styrs av CSS. Då kan man använda min-height - om man låter själva innehållet i en box styra höjden - men vill förhinra att boxen krymper alltför mycket om man på vissa sidor har "väldigt lite" innehåll i boxen eller om användaren förminskar texten manuellt i webläsaren.

Ett annat användningsområde är om man vill att en box ska ta upp hela sidans höjd - 100% - oavsett innehåll.

Internet Explorer

När det gäller att få Internet Explorer att fungera på samma sätt innebär det inte några större svårigheter - när det gäller just min-height - eftersom egenskapen height i praktiken fungerar som "min-height" i IE. Om man anger höjden på en box kommer nämligen IE felaktigt att expandera boxen vertikalt om innehållet tar för stor plats - och det är just precis så "min-height" fungerar i andra webläsare!

Genom att infoga en "conditional comment" i sidans huvud med egenskapen height - som läses bara av Internet Explorer - kommer det att fungera på samma sätt även i IE.

Men eftersom min-height kommer att tolkas korrekt av IE 7 blir det bäst att använda en kommentar som uppfattas bara av IE-versioner av tidigare modell än 7.

Exempel 1

I det här exemplet styr själva innehållet höjden på boxen. Men genom att ange min-height: 250px i stilmallen kommer boxen aldrig att bli mindre än 250px oavsett innehållets storlek.

I kommentaren för Internat Explorer anges height: 250px - vilket betyder att det i praktiken kommer att fungera på samma sätt.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body { font-family: Verdana, sans-serif; font-size: 76%; }
.box { width: 480px; min-height: 250px; }
.innerbox { padding: 15px; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
.box { height: 250px; }
</style>
<![endif]-->

</head>
<body>
<div class="box">
<div class="innerbox">
::
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

Exempel 2

I det här exemplet styrs fortfarande höjden på boxen av innehållet. Men genom att ange min-height: 100% i stilmallen kommer boxen här att uppta hela webläsarfönstrets höjd oavsett om innehållet egentligen inte behöver det utrymmet.

Att änvända min-height: 100% är alltså främst användbart när man påverka en hel sidas layout.

För att det ska fungera måste man också ange att man vill använda hela fönsterytan med: body, html { height: 100%; }.

I kommentaren för Internat Explorer anges height: 100% - vilket betyder att det i praktiken kommer att fungera på samma sätt.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body, html { height: 100%; }
body { font-family: Verdana, sans-serif; font-size: 76%; }
#layout { width: 776px; min-height: 100%; }
#container { padding: 15px; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
#layout { height: 100%; }
</style>
<![endif]-->

</head>
<body>
<div id="layout">
<div id="container">
: :
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

TIPS!
Genom att ange att man vill använda hela fönsterytan med: body, html { height: 101%; } (i stället för 100%) kommer det att skapas en vertikal bläddringslist även på sidor som inte tar upp större plats än 100% i höjdled.

På så sätt undviker man att sidan skuttar åt höger på "korta sidor" när bläddringslisten försvinner i t.ex. Firefox, Opera och Netscape. (I Internet Explorer visas alltid en tom bläddringslist på korta sidor.)

Fiffigt, va?  Big Smile Smily

 Till Toppen 

Min-width

Med egenskapen Min-width kan man ange en minimi-bredd på t.ex. en box. Det innebär att - vad som än händer - kommer boxen aldrig att bli mindre - på bredden - än det mått du angivit i "min-width".

Användningsområden & Exempel

Min-width är främst användbart när man styr sin sidas layout med det relativa måttet procent och vill undvika att sidan krymper till oigenkännlighet på bredden om webläsarfönstret förminskas manuellt. Då skapas i stället en horisontal bläddringslist i webläsarfönstret.

På samma gång skapar min-width en "minimi-bredd" på layuoten så att man kan påverka att sidan visas med en viss bredd även om besökaren har låg upplösning på skärmen - men även då skapas förstås en horisontal bläddringslist i webläsarfönstret.

Internet Explorer

För att få Internet Explorer att fungera på samma sätt som andra webläsare - som tolkar min-width korrekt - får man ta till ett så kallat "hack".

Metoden i exemplet nedan bygger på en idé av Stu Nicholls och orginalet kan du läsa mer om på www.webreference.com.

Här är metoden lite modifierad - så att själva "hacket" endast tolkas av Internet Explorer av tidigare modell än 7 - genom att använda "Conditional Comment".

Exempel

I exemplet nedan är bredden på en box satt till 90%. Men genom att ange min-width: 480px i stilmallen kommer boxens bredd aldrig att bli mindre än 480px även om webläsarfönstret förminskas.

Genom att infoga några extra boxar innuti den yttre och att i stilmallen för Internet Explorer lägga till padding på den ena och en minus-marginal på den andra - med samma bredd som minimi-bredden - kan man få det här att funka även i den webläsaren.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body { font-family: Verdana, sans-serif; font-size: 76%; }
#layout { width: 90%; min-width: 480px; background-color: #EDF6F9; }
#container { padding: 15px; border: 1px solid #000; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
#minwidth1 { padding-left: 480px; }
#minwidth3 { margin-left: -480px; position: relative; }
#minwidth1, #minwidth2, #minwidth3, #container { height: 1px; }
</style>
<![endif]-->

</head>
<body>
<div id="layout">
<div id="minwidth1">
<div id="minwidth2">
<div id="minwidth3">
<div id="container">
::
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

 Till Toppen 

Max-width

Egenskapen Max-width fungerar på samma sätt som min-width - fast tvärtom. Här anger man i stället en max-bredd på t.ex. en box. Det innebär att - vad som än händer - kommer boxen aldrig att bli större - på bredden - än det mått du angivit i "max-width".

Användningsområden & Exempel

Max-width används i första hand när man styr sidans layout med procent och vill undvika att sidan växer på bredden och blir svårläst om besökaren har hög upplösning på skärmen.

Internet Explorer

Vill man få Internet Explorer att fungera på samma sätt som andra webläsare som tolkar max-width korrekt kan man använda sig av javascript.

Metoden i exemplet nedan bygger är hämtat från www.positioniseverything.net och "demon" där är skriven av: Mike Purvis.

Själva javascriptet kommer endast att uppfattas av Internet Explorer av tidigare modell än 7 - genom att man skriver in scriptkoden i en "Conditional Comment".

Exempel

I exemplet nedan är bredden på en box satt till 90%. Men genom att ange max-width: 776px i stilmallen kommer 90% aldrig att bli större än 776 pixlar även om besökaren har en högre upplösning på skärmen.

Javascriptet för Internet Explorer

Vi vill alltså att boxen ska vara 90% av webläsarens fönsteryta. Men om besökarens upplösning är högre än 776 pixlar på bredden vill vi att boxens bredd aldrig ska bli mer än 776 pixar.

Javascriptet ställer frågan om fönstret är större än 776 pixlar. Om det är större anger scriptet att boxen inte ska bli bredare än 776 pixlar. Annars ska boxen vara 90%.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body { font-family: Verdana, sans-serif; font-size: 76%; }
#layout { width: 90%; max-width: 776px; background-color: #EDF6F9; }
#container { padding: 15px; border: 1px solid #000; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
#layout
{
width:expression(document.body.clientWidth > 776? "776px" : "90%" );
}
</style>
<![endif]-->

</head>
<body>
<div id="layout">
<div id="container">
::
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

 Till Toppen 

Min-width & Max-width

Genom att kombinera metoderna ovan kan man använda min-width och max-width så att en box får både en minimi-bredd och max-bredd. Det innebär att - vad som än händer - kommer boxen aldrig att bli mindre - på bredden - än det mått du angivit i "min-width" och aldrig bredare än det mått du angivit i "max-width".

Användningsområden & Exempel

Att kombinera min-width och max-width är främst användbart när man styr sin sidas layout med det relativa måttet procent och vill anpassa sidans layout för olika skärm-upplösningar.

I exemplet nedan kombineras de två metoderna ovan - det gäller även metoderna för att anpassa sidan till Internet Explorer.

Exempel

I exemplet nedan är bredden på en box satt till 90%. Men genom att ange min-width: 480px i stilmallen kommer boxens bredd aldrig att bli mindre än 480px även om webläsarfönstret förminskas.

Genom att också ange max-width: 776px i stilmallen kommer 90% aldrig att bli större än 776 pixlar även om besökaren har en högre upplösning på skärmen.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body { font-family: Verdana, sans-serif; font-size: 76%; }
#layout {
width: 90%;
min-width: 480px; max-width: 776px;
background-color: #EDF6F9; }
#container { padding: 15px; border: 1px solid #000; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
#layout
{
width:expression(document.body.clientWidth > 776? "776px" : "90%" );
}
#minwidth1 { padding-left: 480px; }
#minwidth3 { margin-left: -480px; position: relative; }
#minwidth1, #minwidth2, #minwidth3, #container { height: 1px; }
</style>
<![endif]-->

</head>
<body>
<div id="layout">
<div id="minwidth1">
<div id="minwidth2">
<div id="minwidth3">
<div id="container">
::
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

 Till Toppen 

Max-height

Max-height används för att ange en max-höjd på t.ex. en box. Det innebär att - vad som än händer - kommer boxen aldrig att bli större - på höjden - än det mått du angivit i "max-height".

Användningsområden & Exempel

Att ange max-height på en box är mest användbart om man använder en layout som är beroende av fasta mått och vill förhindra att boxar förstoras och ställer till det så att layouten brakar ihop på ett eller annat sätt.

Internet Explorer

Vill man få Internet Explorer att fungera som andra webläsare - som tolkar max-height korrekt - kan man använda sig av en variant av det javascript som används i "max-widht".

Själva javascriptet kommer endast att uppfattas av Internet Explorer av tidigare modell än 7 - genom att man skriver in scriptkoden i en "Conditional Comment".

Exempel

Boxen i det här exemplet har en fast bredd på 480 pixlar. Genom att ange max-height: 300px i stilmallen kommer boxen aldrig att bli större än 300px - på höjden - oavsett innehållets storlek.

Genom att också ange overflow: auto skapas en vertikal bläddringslist om innehållet tar större plats på höjden - t.ex om besökaren förstorar textstorleken manuellt i webläsaren. Det förhindrar att innehållet "försvinner" i boxen.

Javascriptet för Internet Explorer

Javascriptet ställer frågan om innehållet i boxen tar större plats än 300 pixlar. I så fall anger scriptet att boxen inte ska bli högre än 300 pixlar. Dessutom "auto" för att det hela ska fungera.

Så här kan det se ut på sidan: 

<html>
<head>
<title>Min Sida</title>

<style type="text/css">
body { font-family: Verdana, sans-serif; font-size: 76%; }
.box { width: 480px; max-height: 300px; overflow: auto;  }
.innerbox { padding: 15px; }
</style>

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

</head>
<body>
<div class="box">
<div class="innerbox">
::
</div>
</div>
</body>
</html>

Klicka här för att se en testsida! (öppnas i nytt fönster)

 Till Toppen