---
title: "Hur få div-element att sträcka sig över hela fönstrets höjd?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/168530-hur-få-div-element-att-sträcka-sig-över-hela-fönstrets-höjd"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "handtralala"
published: "2008-01-28T20:47:22.000Z"
updated: "2008-01-30T20:45:49.000Z"
replies: 12
views: 1044
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/168530-hur-få-div-element-att-sträcka-sig-över-hela-fönstrets-höjd"
---

# Hur få div-element att sträcka sig över hela fönstrets höjd?

## #1 — handtralala, 2008-01-28T20:47Z

Jag håller på och layoutar <http://designfirma.frac.dk> men får inte det omslutande \<div\>-elementet "innehall" (dvs det med den grå bakgrunden) att sträcka sig ner till fönstrets botten. Dvs, jag vill att om man ökar storleken på webläsarfönstret vertikalt så ska den grå bakgrunden följa med och inte sluta mitt på som det blir nu. Helst ska även textraden längst ner med kontaktinfo etc följa med på motsvarande sätt.

Dessutom får jag inte loggan att hamna rätt i IE6, verkar funka i andra webläsare (Safari och Firefox). IE6 kanske inte hanterar float-attributet rätt?

Tips någon?

länk till css-fil: <http://designfirma.frac.dk/stilmall.css>

\-edit- fick ordning på loggans position. dock verkar IE6 inte respektera storleken på teckensnitt (textraden med kontaktinfo längst nerska vara 8pt men får samma storlek som brödtexten, dvs 10pt).
\-edit2- fixade teckensnittstorleken genom att ange ett teckensnitt som faktiskt finns på windows...

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

## #2 — Okkido, 2008-01-28T22:11Z

Flytta:
background:#666666 none repeat scroll 0% 50%;
width:600px;
i #innehall till body istället.

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

## #3 — handtralala, 2008-01-28T22:38Z

> **Okkido skrev:**
>
> Flytta:
> background:#666666 none repeat scroll 0% 50%;
> width:600px;
> i #innehall till body istället.

Fast jag vill ju behålla den mönstrade bakgrunden för att få marginaler. Jag vill alltså inte att det grå ska gå hela vägen ut åt sidorna på webläsarfönstret. Om jag gör som du föreslår blir ju hela sidan grå och det mittre, grå \<div\>-elementet sträcker sig ändå inte ner till fönstrets nederkant.

Att ändra bakgrunden till en bild i body-tagen funkar inte heller eftersom jag vill ha lika stora marginaler både på vänster och höger sida, oavsett bredd på webläsarfönstret.

\-edit- Kan någon med IE6 testa om följande fungerar (php-funktion som ska fixa genomskinliga PNG:ar)? <http://www.designfirma.frac.dk/test.php>

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

## #4 — Okkido, 2008-01-28T22:53Z

Tänk dig att du flyttar ut allting ett steg. Flytta ut

```
background:#666;
border-left:1px solid black;
border-right:1px solid black;
margin:0pt auto;
width:600px;
```

till body.

Lägg din fina bakgrund i html istället för på body.

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

## #5 — handtralala, 2008-01-29T07:25Z

> **Okkido skrev:**
>
> Tänk dig att du flyttar ut allting ett steg. Flytta ut
>
>
> ```
> background:#666;
> border-left:1px solid black;
> border-right:1px solid black;
> margin:0pt auto;
> width:600px;
> ```
>
> 
> till body.
> 
> Lägg din fina bakgrund i html istället för på body.

Ah, jag är nog inte helt van vid att man kan sätta css attribut på \_alla\_ html-taggar... Ska testa detta! Tack :)

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

## #6 — Okkido, 2008-01-29T07:30Z

Dock med varierande resultat i ex. IE5.5

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

## #7 — handtralala, 2008-01-29T19:47Z

> **Okkido skrev:**
>
> Dock med varierande resultat i ex. IE5.5

Jag får det inte att lira i Safari eller Firefox heller. Bakgrunden blir ju rätt om jag lägger den som ett attribut till html men själva innehåller fastnar ändå i överkant/vänster sida och sträcker sig fortfarande inte ner till fönstrets nedre kant. Eller menar du att jag ska ta bort #innehall helt och hållet?

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

## #8 — Okkido, 2008-01-29T20:49Z

Kan du inte visa?

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

## #9 — jarvklo, 2008-01-29T21:22Z

> **handtralala skrev:**
>
> jag vill att om man ökar storleken på webläsarfönstret vertikalt så ska den grå bakgrunden följa med och inte sluta mitt på som det blir nu. Helst ska även textraden längst ner med kontaktinfo etc följa med på motsvarande sätt.

Hmm..

Två delproblem... 
1) Höjden på div:en
Du har valt en \<!DOCTYPE som ställer de webbläsare i det som kallas "Standards mode", det gör att höjden på body-elementet anses vara höjden på innehållet i bodyelementet 8dvs lika högt som din \<div id="innehall"\> i ditt fall...
.
Att din div inte "dras ut" om du sätter height:100% på den beror alltså på att body inte anses täcka hela webbläsarfönsterhöjden om den råkar vara högre än ditt innehåll.

Lösning (kokboksmetod) - lägg in följande efter din villkorliga kommentar i \<head\>

```
<style type="text/css">
	html,body {height:100%}
	#innehall {min-height:100%}
</style>
<!--[if lt IE 7.]>
  <style type="text/css">
	#innehall {height:100%}
  </style>
<![endif]-->
```

alternativt kan du meka in det i din ordinarie stilmallsfil - men glöm inte den villkorliga delen som är för IE6 och tidigare IE ;)

2) För att flytta ner sidfotstexten får du rådda lite mer...
Till att börja med kopierar du din sidfotsdiv \*utanför\* \<div id="innehall"\> och lägger in en tom div istället (principen framgår av kommentarerna i <http://member.webforum.nu/2241/bottenfastsidfot-princip.html> )
Därefter flyttar du bakgrundsbilden till #innehall (ev. behöver du meka om den lite för att få med det gråa) - Principen framgår av hur bakgrundsbilden läggs in i containern i t.ex.  <http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html>

Kokboksmetoder som sagt.

Lycka till :birp

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

## #10 — handtralala, 2008-01-29T21:41Z

> **Okkido skrev:**
>
> Kan du inte visa?

Jo, självklart. Nedanstående är fel:
<http://designfirma.frac.dk/test.html>

Här är en jämförelse på hur jag gjort hittils och hur jag vill ha det:
<http://designfirma.frac.dk/bilder/test.jpg>

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

## #11 — handtralala, 2008-01-29T21:44Z

> **jarvklo skrev:**
>
> Hmm..
> 
> Två delproblem... 
> 1) Höjden på div:en
> Du har valt en \<!DOCTYPE som ställer de webbläsare i det som kallas "Standards mode", det gör att höjden på body-elementet anses vara höjden på innehållet i bodyelementet 8dvs lika högt som din \<div id="innehall"\> i ditt fall...
> .
> Att din div inte "dras ut" om du sätter height:100% på den beror alltså på att body inte anses täcka hela webbläsarfönsterhöjden om den råkar vara högre än ditt innehåll.
> 
> Lösning (kokboksmetod) - lägg in följande efter din villkorliga kommentar i \<head\>
>
> ```
> <style type="text/css">
> 	html,body {height:100%}
> 	#innehall {min-height:100%}
> </style>
> <!--[if lt IE 7.]>
>   <style type="text/css">
> 	#innehall {height:100%}
>   </style>
> <![endif]-->
> ```
>
> alternativt kan du meka in det i din ordinarie stilmallsfil - men glöm inte den villkorliga delen som är för IE6 och tidigare IE ;)
> 
> 2) För att flytta ner sidfotstexten får du rådda lite mer...
> Till att börja med kopierar du din sidfotsdiv \*utanför\* \<div id="innehall"\> och lägger in en tom div istället (principen framgår av kommentarerna i <http://member.webforum.nu/2241/bottenfastsidfot-princip.html> )
> Därefter flyttar du bakgrundsbilden till #innehall (ev. behöver du meka om den lite för att få med det gråa) - Principen framgår av hur bakgrundsbilden läggs in i containern i t.ex.  <http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html>
> 
> Kokboksmetoder som sagt.
> 
> Lycka till :birp

Tack! Ska klura på detta. Fan vad det är drygt att skriva validerbar kod ibland...  :OO

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

## #12 — handtralala, 2008-01-29T22:15Z

> **handtralala skrev:**
>
> Tack! Ska klura på detta. Fan vad det är drygt att skriva validerbar kod ibland...  :OO

Yes!! Nu lirar det :) Stort tack, jarvklo!

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

## #13 — handtralala, 2008-01-30T20:45Z

Kan någon med IE6 testa om [sidan](http://designfirma.frac.dk) funkar? När jag testar på min flickväns dator så ignorerar den stilmallen helt och hållet men jag vet inte om det beror på hennes dator eller IE6 i sig. I IE7 (på en annan dator) funkar det som det ska.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/168530-hur-få-div-element-att-sträcka-sig-över-hela-fönstrets-höjd