Exempel på använding av "overflow" i CSS
Först ett exempel på "drop down meny" med en kombination av "overflow" och Javascript. Med "overflow: hidden;" får man ett "utgångsläge" som sätts med bredd och höjd på elementet "div". Med "overflow: visible;" får man fram resten av menyn genom att klicka på den. Mera om "visible" nedan och se källkoden för detaljer hur det är gjort.
Menu 1
Meny 1.1
Meny 1.2
Meny 1.3
Menu 1
Meny 1.1
Meny 1.2
Meny 1.3
Ovanstående meny är samma som den till vänster. men denna underliggande text är i en div med "absolut position". Detta gör att den expanderade menyn "överlappar" den övre delen av texten och menyns innehåll blir svårare att läsa. Javascript som används är onClick="this.className='on'" och onmouseout="this.className='off'"
Ovanstående är en test av en "dropdown" meny där resten av menylänkarna kommer fram när man klickar på den synliga (första) texten. Denna underliggande text är "relativt" positionerad vilket gör att den förskjuts nedåt när menyn expanderar. När man drar bort markören från menyn, "rullar" den upp igen så att bara den första texten syns igen.
overflow: visible;
I denna ruta med class="test" finns en lång text som inte får plats innanför rutan, eftersom rutans mått är fixerad till 200 x 70 pixels. Frågan är förstås vad som händer med den del av texten som inte ryms i rutan? Det beror på vilken "overflow" deklaration som används. Här används overflow: visible;
Att texten i vänster "box" fortsätter nedanför boxen, eller att boxen expanderar i IE, gör att såväl text som box kan komma att försvåra möjligheten att se annan information på webbsidan. Om och hur mycket, beror på hur webbläsarna tolkar "overflow:visible" och om inte "min-height" används som i exemplet till höger.
overflow: visible;
I den vänstra rutan fortsätter texten under rutan om man ser den i en annan webbläsare än Internet Explorer. Detta för att andra webbläsare respekterar de måttangivelser som har angetts. I denna ruta har höjden satts till "min-height", dvs att höjden ska vara minst 70 pixlar men kan expandera om det behövs. Nu expanderar rutans höjd även i andra webbläsare om texten inte ryms inom angiven minimihöjd och förskjuter eventuell underliggande text nedåt. Variablerna "min-height", "min-width" eller dess motsvarigheter "max-height" och "max-width" fungerar inte i Internet Explorer.
overflow: hidden;
I denna ruta syns bara den text som ryms innanför rutan. Med overflow: hidden; innebär det att höjden är "låst" även i IE. Eftersom rutans mått är fixerad till 200 x 70 pixels syns inte resten av texten.
overflow: hidden;
Fortsättning av texten i vänstra rutan: IE. Eftersom rutans mått är fixerad till 200 x 70 pixels syns inte resten av texten.
overflow: scroll;
I denna ruta finns en lång text som inte får rum innanför rutan eftersom rutans mått är fixerad till 200 x 70 pixels. Med "overflow: scroll" får man då en scrollist både verikalt och horizontellt för att kunna scrolla ner och läsa hela texten. Men det får man oavsett man behöver det eller inte.
overflow: auto;
Även i denna ruta fortsätter texten under rutan, men med "overflow: auto" får man med denna text bara en vertikal scrollist vilket kanske normalt ser bättre ut. Med "overflow: auto" får man bara en scrollist om det verkligen behövs när man vill ha en fixerad storlek på en ruta (dvs div eller "box" som det också kallas).
Se också: Inramad text utan overflow
Arnel's Webb