---
title: "100% hög div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/63839-100-hög-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "andreas_lindh"
published: "2003-01-04T17:34:34.000Z"
updated: "2003-01-05T11:09:22.000Z"
replies: 5
views: 307
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/63839-100-hög-div"
---
# 100% hög div
## #1 — andreas_lindh, 2003-01-04T17:34Z
Jag har en div som är 100% hög. Det fungerar bra i Ie men inte i mozilla. Går det att lösa och i så fall hur?
```
Startsidan
Cuper
Matcher
Spelare
Övrigt
Logga Ut
```
css-klasserna
```
.meny {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
width:200px;
height:100%;
float:left;
margin:0px;
}
.ovaldmeny {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
width:200px;
height:12px;
float:left;
margin:0px;
padding:4px;
font-weight:bold;
}
.logga {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
width:200px;
height:80px;
float:left;
margin:0px;
padding:1px;
}
.valdmeny {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #999999;
width:200px;
height:12px;
float:left;
margin:0px;
padding:4px;
font-weight:bold;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #999999;
height:100%;
margin:0px;
}
```
Permalänk: https://www.webforum.nu/p/63839
## #2 — Peter S, 2003-01-04T19:25Z
I Mozilla 1.2.1 (och även Opera 7) fungerar det för mig. Däremot blir alla span-element bredare än själva div-elementet, eftersom du har angett "padding:4px" (gäller även Opera 7).
:)
Permalänk: https://www.webforum.nu/p/902486
## #3 — jarvklo, 2003-01-04T23:27Z
När du anger [height:100%](http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property) på ett block (t.ex. en \) så får du den att bli 100% av [det block den ligger i](http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details).
Om det block den ligger i är \ och du har satt 100% höjd även på den, så skall detta (enligt CSS2 som Mozilla följer slaviskt i detta fall) motsvara 100% av **webbläsarfönstrets höjd**.
Tyvärr så är den gängse tolkningen av detta (som även Moz anammar) att det skall vara 100% av webbläsarfönstrets höjd även när innehållet i \:en är större än webbläsarens höjd...
Vilket bl.a. får till följd att t.ex. bakgrunder och ramar (borders) anpassas i det fallet till webbläsarfönstrets höjd och inte till \:ens verkliga höjd som man kanske egentligen skulle vilja ha det...
För att ytterligare komplicera det hela så beter sig \*samtliga\* nämnda webbläsare (NN, Moz och Opera) olika i hur den hanterar höjder, bredder, marginaler, paddings och relativa bredder beroende på vilken \-fenomenet som Peter S rapporterar om ovan)...
Dvs det finns skillnader i t.ex. MSIE hur den hanterar höjd och bredd på block beroende på om den lägger sig i ["quirks" eller "standards" mode](http://www.webforum.nu/showthread.php?s=&postid=8066#post8066)...
PS.
[*Du kan ibland behöva sätta höjd till 100% även på \-taggen*](http://www.webforum.nu/showthread.php?s=&postid=8068#post8068)
Permalänk: https://www.webforum.nu/p/902586
## #4 — Peter S, 2003-01-05T10:19Z
När det gäller \-problemet kan du enkelt åtgärda det genom att ange
```
max-width:192px;
```
...i klasserna: logga, ovaldmeny och valdmeny. Det fungerar även med att ange ett tal som är lägre än 192.
Annars kan du ersätta alla \-element med \-element och ta bort "float:left" samt "width:200px" på de ovan nämnda klasserna. Resultatet blir då identiskt i såväl IE6, Mozilla 1.2.1 och Opera 7.
Den fullständiga koden skulle då se ut så här:
```
Startsidan
Cuper
Matcher
Spelare
Övrigt
Logga Ut
```
:)
Permalänk: https://www.webforum.nu/p/902678
## #5 — andreas_lindh, 2003-01-05T10:58Z
Tack för svaren. Tänkte inte på det där med paddingen
Jag använder den här doctypen
```
```
Permalänk: https://www.webforum.nu/p/902695
## #6 — Peter S, 2003-01-05T11:09Z
Höjproblemet i Mozilla fixar du genom att skriva följande:
```
[B]html[/B], body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #999999;
height:100%;
margin:0px;
}
```
Sedan uppstår det ett marginalproblem i Opera 7, vilket du kan lösa genom att lägga till "padding:0px;" i den ovanstående koden.
Fullständig kod:
```
Startsidan
Cuper
Matcher
Spelare
Övrigt
Logga Ut
```
:)
Permalänk: https://www.webforum.nu/p/902701
---
Tråden på webben: https://www.webforum.nu/amne/html-css/63839-100-hög-div