---
title: "XHTML -> 100% problem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/86447-xhtml-100-problem"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Wickmark"
published: "2003-09-19T14:49:56.000Z"
updated: "2003-09-23T19:08:08.000Z"
replies: 16
views: 577
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/86447-xhtml-100-problem"
---

# XHTML -> 100% problem

## #1 — Wickmark, 2003-09-19T14:49Z

Det första jag vill säga är att, ja, jag har letat efter liknande trådar, och hittade en hel bunke. Men ingen av dem funkade!

Jag har skrivit både **margin:0px;** och **padding:0px;** i **\<body\>**

Fullständig kod:
Kommentera gärna hela koden, är ny i CSS layers!

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="se" xml:lang="se">
<head>
<title>Leka med XHTML / CSS layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body style="margin:0px; padding:0px;">
<div id="Border" style="position:absolute; left:0px; top:200px; [b][blue]width:100%;[/blue][/b] height:100px; z-index:1; background-color:#000000"></div>
<div id="Border2" style="position:absolute; left:100px; top:0px; [b][red]height:100%;[/red][/b] width:100px; z-index:2; background-color:#999999"></div>
</body>
</html>
```

 
**width:100%;** \= Funkar fint!
**height:100%;** \= Funkar inte alls!

Detta funkar inte alls :S!

Vaaaad gör jag fel, måååste veta, före jag sliter håret av mig  :e !

MVH
Wickmark

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

## #2 — andreas_lindh, 2003-09-19T15:05Z

Sätt height:100% på body också. Du kanske behöver sätta height:100% på html taggen också. Sätt height:100% på html i din css-mall

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

## #3 — Wickmark, 2003-09-19T15:21Z

> **andreas_lindh skrev:**
>
> Sätt height:100% på body också. Du kanske behöver sätta height:100% på html taggen också. Sätt height:100% på html i din css-mall

TACK!
La till i **\<body style=""\>**  CSS koden **height:100%;** , och nu funkar det perfekt!

TACK SÅ MYCKET!

// WIckmark!

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

## #4 — pakmannen, 2003-09-22T09:26Z

Jag har också ett problem angående just detta.
Det blir som sagt rätt när man skriver 100% i både body och html MEN en sak blir väldigt fel i Opera. När man scrollar ner på sidan blir det fel eftersom 100% INTE innebär hela sidan utan bara så många pixlar som skärmen är hög. Har man därför en lång sida slutar elementet som är 100% efter ett tag.

Finns det något sätt att stoppa detta på!?!?!

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

## #5 — jarvklo, 2003-09-22T15:23Z

Beror sig lite på hur sidan är kodad...

Har du en länk till sidan så att man kan grotta lite?

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

## #6 — Wickmark, 2003-09-22T18:56Z

> **pakmannen skrev:**
>
> Jag har också ett problem angående just detta.
> Det blir som sagt rätt när man skriver 100% i både body och html MEN en sak blir väldigt fel i Opera. När man scrollar ner på sidan blir det fel eftersom 100% INTE innebär hela sidan utan bara så många pixlar som skärmen är hög. Har man därför en lång sida slutar elementet som är 100% efter ett tag.
> 
> Finns det något sätt att stoppa detta på!?!?!

Har samma problem...  :( 

Fast i IE 6.0

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

## #7 — jarvklo, 2003-09-22T19:04Z

> **jarvklo skrev:**
>
> Beror sig lite på hur sidan är kodad...
> 
> Har du en länk till sidan så att man kan grotta lite?

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

## #8 — frankof, 2003-09-22T20:28Z

jarvklo\> klart du inte kan få se någon kod, den är säker hemmlig och unik ;)

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

## #9 — dectgap, 2003-09-22T23:06Z

> **frankof skrev:**
>
> jarvklo\> klart du inte kan få se någon kod, den är säker hemmlig och unik ;)

Tänker du på MM-funktionen? ;)

Inget ont om din kod, Wickmark

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

## #10 — Wickmark, 2003-09-23T05:21Z

Förlåt, jag hade inte tid just då att kopiera in ngra rader kod!

MM Funktionen ska jag ta bort, eftersom det funkar endå inte  :( (om man räknar bort preload images och swap image).

Aja, ok, jag får väl posta lite kod då :)

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>&lt;D&lt;|&gt;B&gt;- Clan site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript" src="js/func_main.js"></script>
  

<style type="text/css" media="all">
@import "css/stil1.css";
</style>

</head>

<body style="margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; height:100%; width:100%;" onload="MM_preloadImages('bilder/anka/anka1_hover.gif','bilder/pixel/m_hem_h.gif','bilder/pixel/m_djur_h.gif','bilder/pixel/m_downloads_h.gif','bilder/pixel/m_matcher_h.gif','bilder/pixel/m_gbok_h.gif','bilder/pixel/m_kontakta_h.gif','bilder/pixel/m_historia_h.gif','bilder/pixel/m_admin_h.gif','anka1_hem.gif','anka1_medlemmar.gif','anka1_matcher.gif','anka1_admin.gif','anka1_downloads.gif')">

  
  <!-- ******************************* LOGO START *********************************-->
<div id="Logo" style="position:absolute; left:0px; top:0px; width:100%; height:74px; z-index:4; background-color: #999999; layer-background-color: #999999; border-bottom: 1px solid #000000;" class="Farm"></div>
  <div id="FulLogo" style="position:absolute; left:231px; top:0px; width:251px; height:74px; z-index:5"><img src="bilder/gfx/fattig_logo.gif" width="512" height="74" alt="" /></div>  
  <!--******************************* LOGO SLUT ***********************************-->
  
  
  <!-- ******************************* MENY START *********************************--> 

<div id="DIVMeny" style="position:absolute; left:24px; top:0px; height:[blue][b]100%[/b][/blue]; width:205px; z-index:5;" class="Meny">
    [blue]...............[/blue] 
</div>
  <!-- ******************************* MENY SLUT **********************************-->

  <!-- ******************************* NYHETER START ******************************-->
<div id="DIVNyheter" style="position:absolute; left:247px; top:92px; width:304px; height:171px; z-index:2; overflow: auto;" class="Border">
  <div align="left"><img src="bilder/pixel/p_nyheter.gif" alt="" name="Nyheter" width="150" height="20" id="Nyheter" />
    <br />
	<p>Inga Nyheter... Än!</p>
  </div>
</div>
  <!-- ******************************* NYHETER SLUT *******************************-->
  
  
  <!-- ******************************* SHOUTBOX START *****************************-->
	  <div id="DIVShoutbox" style="position:absolute; left:577px; top:92px; width:304px; height:171px; z-index:2; overflow: auto;" class="Border">
  	    <div align="left"><img src="bilder/pixel/p_shoutbox.gif" alt="" name="Shoutbox" width="150" height="20" id="Shoutbox" /><br />
			
	 <p><span class="NyhetsOverskrift">Test2; Radbrytning?! råmar:</span><br />
		Test<br />
		[2003-09-20 16:01:45]|[<a href="mailto:Zanathel@Hotmail.com">E-Post</a>]|[<a href="http://www.rubensoft.nu/LWSWE/" target="_blank">Webbsida</a>]
	 </p>
     
	
	 <p><span class="NyhetsOverskrift">Test råmar:</span><br />
		Affe!<br />
		[2003-09-20 16:01:07]|[<a href="mailto:zanathel@hotmail.com">E-Post</a>]
	 </p>
     
	
	 <p><span class="NyhetsOverskrift">Affe råmar:</span><br />
		affe<br />
		[2003-09-20 15:54:24]|[<a href="http://test" target="_blank">Webbsida</a>]
	 </p>
     
	
  	  </div>
</div>
<div id="RAAAAMA" style="position:absolute; left:814px; top:95px; width:65px; height:20px; z-index:2;"><a href="javascript:void(0);" onclick="popUpWindow('shout_skriv.asp','250','150','240','330'); return true">R&aring;&aring;&aring;&aring;ma!</a></div>

  <!--******************************* SHOUTBOX SLUT *******************************-->
	
	
  <!--******************************* MATCHER START *******************************-->
[red]<!-- Har förlängt denna så att ni ser vad som händer :) -->
<!--Den är nu 1000 pixlar hög = längre än skärmen-->[/red]
	<div id="DIVMatcher" style="position:absolute; left:247px; top:276px; width:434px; height:1000px; z-index:2;" class="Border"><img src="bilder/pixel/p_slaktar_meriter.gif" alt="" width="150" height="20" /></div> 
  <!--******************************* MATCHER SLUT ********************************-->
	
	
  <!--******************************* VECKANS BILD START **************************-->
	<div id="DIVVeckansBild" style="position:absolute; left:695px; top:276px; width:186px; height:197px; z-index:2;"  class="Border"><img src="bilder/pixel/p_veckans_bild.gif" alt="" name="VeckansBild" width="150" height="20" id="VeckansBild" /></div>
  <!--******************************* VECKANS BILD SLUT ***************************-->
</body>
</html>
```

Den 'unikt kodade' samt 'hemliga' sidan hittar ni [här](http://www.rubensoft.nu/LWSWE/DB/) ;)

Här har ni lite kod att 'grotta' på :D

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

## #11 — jarvklo, 2003-09-23T08:17Z

Okej...

Problemet kommer sig av din användning av relativa höjder på absolutpositionerade block...

I den här tråden finns en förklaring och några läsvärda länkar med tips på workarounds pga diverse webbläsarbuggar:
<http://www.webforum.nu/showthread.php?s=&postid=494595#post494595>

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

## #12 — pakmannen, 2003-09-23T12:51Z

Här är lite av min kod:

\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"\>

\<html lang="sv"\>
\<head\>
\<title\>Galaxi Reklam\</title\>

\<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /\>
\<meta name="keywords" content="" /\>
\<meta name="description" content="" /\>

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

\<body\>
\<div class="center"\>

	\<!-- Sidhuvud --\>	
	\<div class="topbild"\>&nbsp;\</div\>
	
	\<div class="lankar"\>&nbsp; &nbsp; &nbsp;
	\<a class="menu" href="index.html"\>Förstasidan\</a\> \|
	\<a class="menu"  href="index.html"\>Företaget\</a\> \|
	\<a class="menu"  href="index.html"\>Katalogen\</a\> \|
	\<a class="menu"  href="index.html"\>Produkter\</a\>
	\</div\>
	\<!-- /Sidhuvud --\>

	\<!-- Leftbox --\>
	\<div class="leftbox"\>

		\<!-- Navigera --\>
		\<div class="hnavigation" style="letter-spacing: 4px; z-index: 1;"\>navigera:\</div\>

		\<div class="navigation"\>
		\<p\>\<strong\>Klicka på\</strong\> länkarna nedan för att navigera mellan de olika sidorna:\</p\>

		\<p\>
		\- Personal\<br/\>
		\- Presentation\<br/\>
		\- Miljöpolicy\<br/\>
		\- Varför Galaxi?\<br/\>
		\</p\>
		\</div\>
		\<!-- /Navigera --\>

		
		\<!-- Adress --\>
		\<div class="hadress" style="letter-spacing: 8px; z-index: 1;"\>adress:\</div\>

		\<div class="adress"\>\<p\>
		\<strong\>Galaxi Reklam AB\</strong\>\<br/\>
		Baggåkersgatan 8\<br/\>
		431 53 Mölndal\<br/\>
		Tel: 031-706 38 50\<br/\>
	    	Fax: 031-706 38 51\<br/\>
	    	<promotion@galaxi.se>\<br/\>
		\</p\>\</div\>
		\<!-- /Adress --\>

	\</div\>
	\<!-- /Leftbox --\>

	\<!-- Mainpage --\>
	\<div class="mainpage"\>	
	
	\<p style="font-size: 13px;"\>\<strong\>Välkommen till Galaxi Reklam!\</strong\>\</p\>
	\<p\>"Galaxi Reklam AB är ett av Göteborgs mer kända och erfarna företag inom presentreklam och profilkläder.\</p\>
	\<p\>Vi finns i nya och fräscha lokaler på Baggåkersgatan 8, där vi har mer plats för utställning och produktvisning än tidigare.\</p\>
	\<p\>Du är hjärtligt välkommen att se dig omkring och prata med vår kunniga personal!"\</p\>

	\<p\>\<strong\>Läs mer om:\</strong\>\</p\>
	\<p\>
	\- Reklamartiklar i Göteborg\<br/\>
	\- Presentreklam\<br/\>
	\- Profilkläder och Textilreklam\<br/\>
	\- Kampanjartiklar och t-shirt med tryck\<br/\>
	\- Marketing Event\<br/\>
	\</p\>

	\<p\>\<img src="bilder/katalog2.jpg" alt="Nya katalogen är här!" align="right" /\>
	\<strong\>Ny katalog ute nu!\</strong\>\</p\>
	\<p\>Profilkläder och presentreklam!\</p\> 
	\<p\>Vår nya katalog är sprängfylld 
	med artiklar från välkända och beprövade leverantörer.\</p\>
	\<p\>Hög kvalitet och god funktionalitet är kännetecknet.\</p\>
	\<p\>
	\- \<a href="bestall.html"\>Beställ katalogen ifrån hemsidan\</a\>\<br/\>
	\- \<a href="pdf.html"\>Ladda ner katalogen i PDF-format\</a\>\<br/\>
	\</p\>
	
	\</p\>
		

	\</div\>
	\<!-- /Mainpage --\>

	\<!-- Nyheter --\>
	\<div class="news"\>

	\<p\>\<span style="font-size:20px; "\>Nyheter\</span\>\<br/\>
	\<img src="bilder/pixel.gif" width="250" height="1" alt="line"/\>\</p\>

	\<p\>\<strong\>Öppet hus vecka 45!\</strong\>\<br/\>
	\<em\>Datum: 2003-05-16\</em\>\</p\>
	\<p\>Öppet hus Torsdag 2 Oktober  kl:10:00 - 17:30
	Anmälan vill vi ha senast måndagen 29 september.
	Vi kommer att skicka ut ett nyhetsbrev om detta nu på torsdag\</p\>
	\<p\>\<strong\>Till toppen\</strong\>\<br/\>
	\<img src="bilder/pixel.gif" width="250" height="1" alt="line"/\>\</p\>
	
	\<p\>\<strong\>Lägre kostnad för inträde i SBPR\</strong\>\<br/\>
	\<em\>Datum: 2003-05-16\</em\>\</p\>
	\<p\>Styrelsen har beslutat sänka registeringsavgiften för blivande SBPR-medlemmar 
	till enbart 2.500 kr - en kraftig sänkning från tidigare 10.000 kr. Därmed blir det billigare att 
	bli medlem - årskostnaden 10.000 kr är dock oförändrad.\</p\>
	\<p\>Om du länge funderat på att bli medlem, men ännu inte slagit 
	till - NU är rätt tillfälle! Skriv till ordföranden Kenneth Ohlsson för 
	information och ansökningshandlingar.\</p\>
	\<p\>\<strong\>Till toppen\</strong\>\<br/\>
	\<img src="bilder/pixel.gif" width="250" height="1" alt="line"/\>\</p\>

	\<p\>\<strong\>Öppet hus vecka 45!\</strong\>\<br/\>
	\<em\>Datum: 2003-05-16\</em\>\</p\>
	\<p\>Öppet hus Torsdag 2 Oktober  kl:10:00 - 17:30
	Anmälan vill vi ha senast måndagen 29 september.
	Vi kommer att skicka ut ett nyhetsbrev om detta nu på torsdag\</p\>
	\<p\>\<strong\>Till toppen\</strong\>\<br/\>
	\<img src="bilder/pixel.gif" width="250" height="1" alt="line"/\>\</p\>

	\</div\>
	\<!-- /Nyheter --\>    

\</div\>
\</body\>
\</html\>

Och här e CSS:n

html {
padding: 0px;
margin: 0px;
height: 100%;
}

body {
padding: 0px;
margin: 0px;
height: 100%;
background-color: #00678C;
color: #FFFFFF;
}

.center {
width: 760px;
height: 100%;
background-color: #FFFFFF;
margin: auto;
position: relative;

font-family: verdana;
font-size: 10px;
color: #000000;
}

a:link {color: black; text-decoration: underline;}
a:visited {color: black; text-decoration: underline;}
a:active {color: black; text-decoration: underline;}
a:hover {color: black; text-decoration: underline;}

/\*   Sidhuvud   \*/

.topbild {
width: 760px;
height: 100px;
top: 0px;
left: 0px;
background-color: #005371;
color: #000000;
position: relative;
}

.lankar {
width: 760px;
height: 12px;
padding-top: 3px;
padding-bottom: 3px;
top: 0px;
left: 0px;
background-color: #0076A2;
color: #000000;
position: relative;

font-weight: bold;
font-family: verdana;
font-size: 10px;
color: #FFFFFF;
}

a.menu:link {color: white; text-decoration: none;}
a.menu:visited {color: white; text-decoration: none;}
a.menu:active {color: white; text-decoration: none;}
a.menu:hover {color: white; text-decoration: underline;}

/\*   Olika boxar   \*/

.leftbox {
width: 160px;
height: auto;
position: absolute;
top: 160px;
left: 0px;
padding: 0px;
}

.hnavigation {
position: relative;
top: 0px;
left: 0px;
padding-left: 10px;

color: #A4BBC4;
font-family: verdana;
font-size: 18px;
}

.navigation {
width: 130px;
height: auto;
position: relative;
top: -4px;
left: 0px;
background-color: #ECF9FE;
border-right: 1px solid #A4BBC4;
border-top: 1px solid #A4BBC4;
border-bottom: 1px solid #A4BBC4;
padding: 10px;

font-family: verdana;
font-size: 10px;
color: #3F5D68;
}

.hadress {
position: relative;
top: 20px;
left: 0px;
padding-left: 10px;

color: #A4BBC4;
font-family: verdana;
font-size: 18px;
}

.adress {
width: 130px;
height: auto;
position: relative;
top: 16px;
left: 0px;
background-color: #ECF9FE;
border-right: 1px solid #A4BBC4;
border-top: 1px solid #A4BBC4;
border-bottom: 1px solid #A4BBC4;
padding: 10px;

font-family: verdana;
font-size: 10px;
color: #3F5D68;
}

.mainpage {
width: 240px;
height: auto;
position: absolute;
top: 160px;
left: 180px;
background-color: #FFFFFF;

font-family: verdana;
font-size: 10px;
color: #000000;
}

.news {
width: 250px;
height: auto;
padding-left: 25px;
position: absolute;
top: 160px;
left: 450px;
background-color: #FFFFFF;
border-left: 1px dashed #AAAAAA;

font-family: verdana;
font-size: 10px;
color: #000000;
}

Fan va mycket det var då.. Hm.
Här e sidan:
[www.galaxi.se/test](http://www.galaxi.se/test)

Det alltså .center div:en som blir konstig när man scrollar nedåt.

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

## #13 — pakmannen, 2003-09-23T13:16Z

Hm, det har alltså med absolute och relative att göra..
Jag skulle kunna lösa problemet, om jag visste hur man la relative div:ar bredvid varandra. Dom kommer ju automatiskt nedanför varandra när man gör dom. Finns det något sätt att fixa det?

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

## #14 — grillkillen, 2003-09-23T13:41Z

Lägg till float:left; i alla div taggar så borde de hamna sida vid sida.

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

## #15 — pakmannen, 2003-09-23T14:51Z

Tack! Det fungerar jättebra! Tacktacktacktacktack!!

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

## #16 — grillkillen, 2003-09-23T15:15Z

you're welcome

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

## #17 — pakmannen, 2003-09-23T19:08Z

Hum, fast vid närmare inspektion fungerar det faktiskt fortfarande inte i Opera/Mozilla/Netscape. Jag trodde att det skulle lösa sig om man gjorde alla div:ar till relative? Fan, jag fattar inte det här!! Vad är det för fel!? Det GÅR ju verkligen inte att använda height: 100%

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/86447-xhtml-100-problem
