---
title: "Hela höjden oavsett upplösning"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/123571-hela-höjden-oavsett-upplösning"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ade"
published: "2005-03-02T12:19:40.000Z"
updated: "2005-03-04T11:15:55.000Z"
replies: 17
views: 488
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/123571-hela-höjden-oavsett-upplösning"
---

# Hela höjden oavsett upplösning

## #1 — ade, 2005-03-02T12:19Z

Har kommit till detta igen och jag lär mej aldrig hur man gör det. 

Jag har byggt en sida med en det tabeller, nu vill jag ha sidan att sidan ska täcka hela höjden, utan scroll. Jarvklo brukar hjälpa mig och är duktig på sånt här.

```
<table width="703" border="0" cellpadding="0" cellspacing="0">
  
  <tr> 
    <td width="26" rowspan="6" valign="top" background="leftshadow.gif"></td>
    <td height="110" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="650" height="110" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
    <td width="27" rowspan="6" valign="top" background="rightshadow.gif"></td>
  </tr>
  <tr> 
    <td width="130" height="46" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        
        <tr> 
          <td width="130" height="46" background="menu_right.gif"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="19" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="19" background="under.gif" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="226" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="226" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="212" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="212" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="27" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="27" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
```

Ändra gärna denna kod och berätta vad ni gjort för att få den 100% oavsett upplösningen.

tack på förhand!

Permalänk: https://www.webforum.nu/p/123571

## #2 — jarvklo, 2005-03-02T14:06Z

Hmm..

Standardlösning:

1) lägg till 

```
style="height:100%"
```

 i din yttersta \<table\>

2)lägg till 

```
 body, html {margin:0;padding:0;height:100%}
```

 i din stilmall

Permalänk: https://www.webforum.nu/p/1564646

## #3 — ade, 2005-03-02T14:09Z

2an har jag redan, yttersa, men du den längst till höger då?

Permalänk: https://www.webforum.nu/p/1564649

## #4 — jarvklo, 2005-03-02T14:14Z

Den delen av tabellen blir också 100% hög om du kör med style="height:100%" på den table som "startas först" i koden (dvs "den yttersta" ;) )

Hur det hela ser ut med dina bilder inlagda (som jag inte har tillgång till) är en helt annan femma däremot ... Men man kan inte hjälpa dig med det utan bilderna ;)

Har du en länk till sidan så att det är lättare att se vad du egentligen siktar på ?

Permalänk: https://www.webforum.nu/p/1564650

## #5 — ade, 2005-03-02T14:20Z

<http://www.carcentrum.se/design05>

Permalänk: https://www.webforum.nu/p/1564652

## #6 — jarvklo, 2005-03-02T14:25Z

Testa 

```
<table width="703" border="0" cellpadding="0" cellspacing="0" style="height:100%">
```

 som sagt ;)

Permalänk: https://www.webforum.nu/p/1564658

## #7 — ade, 2005-03-02T14:25Z

Okej.

Permalänk: https://www.webforum.nu/p/1564659

## #8 — ade, 2005-03-02T14:32Z

Så här vart det nu, jag ökade längden också.

<http://www.carcentrum.se/design5>

Fick byta adress för ftpn krånglar.

Permalänk: https://www.webforum.nu/p/1564662

## #9 — Insider, 2005-03-02T14:45Z

Nej, du har skrivit fel:

```
style="[b]height:[/b]100%"
```

Permalänk: https://www.webforum.nu/p/1564671

## #10 — ade, 2005-03-02T14:48Z

Ändrade nu men vart ingen skillnad :(

Edit: så här står det i stilmallen. 

```
body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}
```

Den är det väl inget fel på?!

har uppdaterat

<http://www.carcentrum.se/design5>

Permalänk: https://www.webforum.nu/p/1564673

## #11 — Insider, 2005-03-02T15:49Z

Nu funkar det ju med 100% höjd för tabellen.
Men du kan inte ha fasta höjdvärden på alla elementen inuti tabellen. Bara på de som har med designen att göra.

Permalänk: https://www.webforum.nu/p/1564710

## #12 — ade, 2005-03-02T15:55Z

Men jag har ju haft det förut, att sidan är från topp till bott utan scroll och oavsett upplösning. Det hjälpte jarvklo mej med. Så det ska väl fungera här också!

Permalänk: https://www.webforum.nu/p/1564714

## #13 — Insider, 2005-03-02T18:36Z

Men om innehållet är högre än 100% så måste man ju få en scroll. Eller hur?
Just nu har du satt höjden på en \<td\> till 816

Permalänk: https://www.webforum.nu/p/1564784

## #14 — ade, 2005-03-02T21:13Z

Sök på hela höjden oavsett upplösning så hittar du en tråd där jarvklo löste ett sådant problem åt mej. 

Så är det gjort på exempelvis <https://www.mdsolutions.se>

Men, jag som har dubbel så högt aktivitetsfält får scrolla lite på den sidan, men ingen scroll på min gammla sida som jarvklo hjälpte mej med.

Permalänk: https://www.webforum.nu/p/1564839

## #15 — jarvklo, 2005-03-02T22:20Z

Hmm
Verkar som om du har gått på en ganska vanlig mina, nämligen den att en tabell börjar "justera" radhöjder (och kolumnbredder) när man  "överspecificerar"  måtten (och ibland utan att man gör det också pga "konstigt" innehåll - men det är en annan historia ;) )

Med "överspecificering" menas att man specificerar precis allt, men gör det på ett sätt som inte kan uppfyllas. Exempel:

```
<table width="400" border="1">
  <tr>
    <td width="100">100</td>
    <td width="200">200</td>
  </tr>
</table>
```

 Den här tabellens yttermått skall alltså vara 400 pixlar på bredden, men kolumnernas sammanlagda bredd blir 300 pixlar... 
Hur förväntas tabellen egentligen bete sig ?  
Skall sammanlagda bredden minskas till 300 eller skall kolumnerna breddas så att deras summa blir 400 pixlar ?
Om så - i så fall skall bägge kolumnerna "breddas" för att bibehålla proportionerna, eller skall "så få som möjligt" anpassas för att inte störa innehållet ?

Svaret på de (retoriska :e ) frågorna finns naturligtvis nånstans i W3C:s specar, men man kan snabbt konstatera att hanteringen skiljer sig lite mellan webbläsarna (även om mycket naturligtvis fungerar på samma sätt i de flesta)

Ett annat exempel förresten:

```
<table width="400" border="1">
  <tr>
    <td width="10%">denhärskallvaratioprocentbred</td>
    <td width="200">200</td>
  </tr>
</table>
```

Så - dina höjdangivelser skapar en överspecificerad tabell när du sätter höjden till 100% och höjden av webbläsarfönstret överstiger summan av tabellradernas angivna höjder - och då börjar alltså radernas respektive höjder att justeras av webbläsaren så att summan av de modifierade höjderna skall uppfylla tabellens verkliga höjd - med "glipor" mellan bilderna som följd.

Lösning:
Tänk om lite nu när du känner till problemet och lägg tabellerna ungefär såhär istället:

```
<table id="yttre" style="height:100%" border="1"> 
  <tr valign="top">
    <td>
     <table id="header-och-meny-med-fast-hojd" border="1" width="100%">
       <tr><td style="height:100px">Header med fast höjd</td></tr>
       <tr><td style="height:100px">[ny tabell med 100% bredd och fast höjd som innehåller menyn]</td></tr>
     </table>
     <div> Innehållet</div>
    </td>
   </tr>
   <tr valign="bottom"><td>[sidfot, eller en tabell med fast höjd och 100% bredd med  sidfoten i ]</td></tr>
</table>
```

 Så länge du har samma bakgrundsfärg/bild i "ytter"-tabellens celler och i innehållet ger detta det du vill ha... För det spelar då ingen roll hur stora de två raderna i yttertabellen blir på höjden iom att den ena justerar innehållet "mot toppen" och den andra "mot botten"

I takt med att innehållet sedan växer på höjden, kommer cellerna att fyllas och problemet att försvinna - resten av tricket består i att klura ut hur du skall beskära dina bakgrundsbilder för den "nya" strukturen - men det tror jag du fixar utan problem  ;)

:birp

*/red: förtydligade exemplet*

Permalänk: https://www.webforum.nu/p/1564861

## #16 — ade, 2005-03-03T12:54Z

Jag körde height:100% på tabellen den tabellen som är under menyn nu, men jag förstår inte riktigt alt du skriver pga av mina kunskaper i html är begränsade.

Skulle vara bra om du kunde visa ett lite mer specifikt exempel.

Så här ser det ut nu:

<https://www.carcentrum.se/design5>

Permalänk: https://www.webforum.nu/p/1565042

## #17 — jarvklo, 2005-03-03T14:56Z

Mer specifikt exempel för hur DirektDesigns webbsidesexempel för Birka Logistik AB skulle kunna kodas bifogas...

Principen:

En huvudtabell med två rader

På övre raden lägger en tabellcell som innehåller två saker:
\* En tabell med header och meny som har fast höjd
\* och under den en \<div\> med sidinnehållet

På undre raden lägger du en tabell med sidfoten.

valign="top" på övre raden
valign="bottom" på undre raden

Det enda (förutom dina designbilder) du behöver peta in är förmodligen 

```
body,html {height:100%;margin:0;padding:0}
```

 \- men det har du ju koll på numera ;)

:birp

Bilagor:

- [adebirkalogistik.htm.txt](https://www.webforum.nu/a/5718.txt)

Permalänk: https://www.webforum.nu/p/1565186

## #18 — ade, 2005-03-04T11:15Z

Tack, men jag löste det innan med den där koden som du hjälpte mej med förrut. Du är en hjälte ;)

Permalänk: https://www.webforum.nu/p/1565538

---

Tråden på webben: https://www.webforum.nu/amne/html-css/123571-hela-höjden-oavsett-upplösning