---
title: "Hela höjden oavsett upplösning"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/118814-hela-höjden-oavsett-upplösning"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ade"
published: "2004-12-28T12:23:07.000Z"
updated: "2004-12-29T19:07:10.000Z"
replies: 14
views: 642
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/118814-hela-höjden-oavsett-upplösning"
---

# Hela höjden oavsett upplösning

## #1 — ade, 2004-12-28T12:23Z

Med denna kod kan jag få sidan 100% hög utan att scrolla oavsett vilken upplösning jag har. Iaf i internet explorer. Någon som vet något om det inte fungerar i andra webbläsrae?

\#container{
	height:100%;
	width:537px;
	margin:0;
	padding:0;
	background-color:#6B8FB3;
	border-left:1px #666 solid;
	border-right:1px #666 solid;
}

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

## #2 — jarvklo, 2004-12-28T13:19Z

Hmm...

Det bör fungera, men det är beroende på 

- [vilken \<!DOCTYPE du kör med](http://www.webforum.nu/showthread.php?s=&postid=650163#post650163)
- om du deklarerar höjden på html och body till 100% såhär

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

  i det fall väljer en \<!DOCTYPE som ger dig "Standards mode"
- om #container verkligen är det "yttersta blocket" i koden (vilket väl är troligt, men iallafall... det kan påverka om den inte är det ;) )...

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

## #3 — ade, 2004-12-28T13:24Z

Okej! Tackar. Jag får testa!

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

## #4 — ade, 2004-12-28T15:34Z

Det fungerar inte och jag kör med 

\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\>

Någon som kan hjälpa mig?

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

## #5 — ade, 2004-12-28T15:38Z

<http://www.direktdesign.se/osf>  \<\< Där kan ni se sidan.

Stilmallen ser ut så här: 

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

container{
height:100%;
width:705px;
margin:0;
padding:0;
}
```

om jag bara kör med 

container{
height:100%;
width:705px;
margin:0;
padding:0;

så blir designen helt fel placerad.

Nu blir den rätt placerad men man lär scrolla för att se hela sidan!

Tack på Förhand!

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

## #6 — jarvklo, 2004-12-28T15:44Z

Jadu - det kanske beror på att den sidan du refererar till (via en framesetsida) har en layout baserad på en tabell med fasta värden på \<td height="..."\> och helt saknar någon form av element som har id="container" :birp

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

## #7 — ade, 2004-12-28T15:46Z

Okej, så jag ska ha typ så här då, 

\<td id="container" height="400"\>

Är det rätt?

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

## #8 — jarvklo, 2004-12-28T15:51Z

Njae... vänta nu...  nu är jag inte helt med på noterna längre... 
Du sade i ditt första inlägg att du fått det att funka i MSIE - hur såg koden ut då (dvs var hade du id="container" då ? )

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

## #9 — ade, 2004-12-28T15:59Z

jag har fått koden va en annan kille som haft det. och då fungerade det i ie!

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

## #10 — ade, 2004-12-28T16:02Z

Men jag såg nu att han körde med divvar.

<http://www.sigvardsson.nu/>

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

## #11 — jarvklo, 2004-12-28T17:59Z

Yep.  

Och jag antog automagiskt att det var div:ar inblandade när du frågade sådär - men det är inga problem nu när vi pratar om samma sak ;)

För det du *kan* göra, är att du kan sätta 

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

 på din "yttersta" tabelltagg, och sedan ta bort height från "den där stora" tabellcellen...

Testa koden i den bifogade filen (jag tog mig friheten att meka till din kod så att den borde funka både i Mozilla och MSIE på Windows... ;)

Vill du sedan ha layouten centrerad i sidled, lägger du bara till 

```
align="center"
```

 i den "yttersta" \<table\>-taggen ;)

Och, som någon säkert kommer att påpeka, **kan** man göra den här layouten utan tabeller också ganska enkelt, men **det** är en helt annan historia det :e )

Lycka till!

Bilagor:

- [test.html.txt](https://www.webforum.nu/a/5181.txt)

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

## #12 — ade, 2004-12-29T14:49Z

Tack för din hjälp men main:en (där texten är) går ju inte ända till botten. Inte för mej iaf. Det är ju det också jag vill uppnå.

Vad beror det på?

Edit: Testade att läggain height: 100%;" si style strängen men det funkade inte!

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

## #13 — ade, 2004-12-29T14:55Z

Index.htm

```

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Osf</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body,html {height:100%;margin:0;padding:0}
</style>
</head>

<body background="bg_fade.gif">
<table width="705" border="0" cellpadding="0" cellspacing="0" height="100%">
  <!--DWLayoutTable-->
  <tr> 
    <td width="705" height="85" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="705" height="85" valign="top" background="toppbild.gif"><!--DWLayoutEmptyCell-->&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="705" height="32" valign="middle" background="menu_bg.gif"><p align="center"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong><font color="CCC1AC">Hem</font><font color="8F7156"> 
              |</font> <font color="CCC1AC">Produkter</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">Webbshopp</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">F&ouml;retaget</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">Kontakta oss</font></strong></font></p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td  valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="705" height="446" valign="top" bgcolor="f8f8f8" style="border-right: 1px solid grey; height:100%;"> 
            <blockquote> 
              <p><br>
                <font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>V&auml;lkommen 
                till v&aring;r webbsida&nbsp;</strong><font color="#CCCCCC" size="1">&gt;&gt;</font></font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p>&nbsp;</p>
              <p align="right">&nbsp;</p>
            </blockquote></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
```

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

## #14 — jarvklo, 2004-12-29T17:33Z

Hmm...
Att få till en 100% hög tabell inuti en tabellcell är alltid knepigt...

Men å andra sidan så kan man ju nästan alltid ta bort en tabell med bara en rad och en kolumn (som du har i main) när den ligger inuti en tabellcell... 
För tabellcellen har ju redan de dimensioner du vill ha på main...

Testa:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Osf</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body,html {height:100%;margin:0;padding:0}
</style>
</head>

<body background="bg_fade.gif">
<table width="705" border="0" cellpadding="0" cellspacing="0" height="100%">
  <!--DWLayoutTable-->
  <tr> 
    <td width="705" height="85" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="705" height="85" valign="top" background="toppbild.gif"><!--DWLayoutEmptyCell--> </td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="705" height="32" valign="middle" background="menu_bg.gif"><p align="center"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong><font color="CCC1AC">Hem</font><font color="8F7156"> 
              |</font> <font color="CCC1AC">Produkter</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">Webbshopp</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">Företaget</font> <font color="8F7156">|</font> 
              <font color="CCC1AC">Kontakta oss</font></strong></font></p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td  valign="top"  bgcolor="f8f8f8" style="border-right: 1px solid grey;">
            <blockquote> 
              <p><br>
                <font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Välkommen 
                till vår webbsida </strong><font color="#CCCCCC" size="1">&gt;&gt;</font></font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem 
                Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since 
                the 1500s, when an unknown printer took a galley of type and scrambled 
                it to make a type specimen book. It has survived not only five 
                centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the 
                release of Letraset sheets containing Lorem Ipsum passages, and 
                more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum. </font></p>
              <p> </p>
              <p align="right"> </p>
            </blockquote>
			</td>
  </tr>
</table>
</body>
</html>
```

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

## #15 — ade, 2004-12-29T19:07Z

Det funkade fint fint :)

1000 Tack för hjälpen!

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

---

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