---
title: "Vertikal \"stretch\""
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/122119-vertikal-stretch"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Skarre"
published: "2005-02-09T19:48:54.000Z"
updated: "2005-07-03T19:43:30.000Z"
replies: 11
views: 467
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/122119-vertikal-stretch"
---

# Vertikal "stretch"

## #1 — Skarre, 2005-02-09T19:48Z

Jag vet inte om jag missar det uppenbara, men jag kommer inte på någon bra lösning på detta. Jag försöker bygga en enkel design ungefär enligt bifogad bild. Sidan är indelad i två (eventuellt fler) centrerade divar, men haken är att den nedersta diven ska sträcka sig ner till botten av sidan oavsett om innehållet kvräver detta. Jag vore otroligt tacksam om någon kunde göra ett försök. Några rader kod, eller bara ett tips. Allt är välkommet!

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

## #2 — zcorpan, 2005-02-09T22:09Z

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>foo</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #foo { height:100%; }
body { 
	display: table; 
	width: 80%; 
	margin: 0 auto; 
	background: silver; 
	color: black; 
}
#foo { display:table-cell; background: white; }
h1 { border-bottom: .5em solid silver; }
</style>
<div id="foo">
<h1>foo</h1>
<p>test</p>
</div>
```

 :)

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

## #3 — Insider, 2005-02-09T22:18Z

> **zcorpan skrev:**
>
> ```
> body { 
> 	display: table; 
> }
> ```
>
>  :)

Funkar bara i Firefox va?

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

## #4 — Skarre, 2005-02-10T08:47Z

Tack för den zcorpan! Enligt quirksmode.org har "display:table" faktiskt bättre stöd än jag trodde.

> Supported by Opera 5, Konqueror, Safari and Mozilla. Explorer 5 on Mac is buggy.

Dock hävdar de att det inte stöds av IE på Windows, men på min IE6/Win verkar det fungera.

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

## #5 — Insider, 2005-02-10T09:08Z

> **Skarre skrev:**
>
> Dock hävdar de att det inte stöds av IE på Windows, men på min IE6/Win verkar det fungera.

Se där ja. Det funkade ju fint.

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

## #6 — Skarre, 2005-02-10T09:35Z

Jag har experimenterat lite med en sida nu, men jag har problem med två saker. Jag vill gärna ha en ram runt varje "box" och även ett mellanrum i botten. Några idéer?

Så här ser det ut:
<http://member.webforum.nu/1826/stretch.htm>

Och det här är ungefär önskat resultat:
<http://member.webforum.nu/1826/stretch.gif>

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

## #7 — zcorpan, 2005-02-10T17:50Z

Faktum är att IE \<del\>tolkar *display:table* som *display:block*\</del\> \<ins\>ignorerar *display:table*\</ins\>, och dessutom tolkar den *height* som *min-height*, varför det "funkar"... :D

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

## #8 — zcorpan, 2005-02-10T20:00Z

Äh, det mest uppenbara är ju att göra såhär: 

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html { background: silver; }
html, body, .table { height:100%; }
.table { display: table; border-collapse: separate; border-spacing: 10px; width: 60%; margin: 0 auto; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; border: 5px solid gray; background: white; }
#a, #b { height: 50px; }
</style>
<div class="table">
<div class="tr"><div class="td" id="a"><h1>test</h1></div></div>
<div class="tr"><div class="td" id="b"><h2>yay</h2></div></div>
<div class="tr"><div class="td" id="c"><p>...text...</p></div></div>
</div>
```

Någon workaround för IE har jag dock inte... Det skulle väl vara en HTML-tabell, eller på annat sätt positionera blocken...

Varför det är nödvändigt att krångla till det såhär beror väl på att man vill ha semantisk korrekt HTML, och eftersom DIV är semantiskt neutal kan man använda det för att kunna presentera dokumentet som man vill med CSS... Använder man en "riktig" HTML-tabell har man förstört semantiken i dokumentet en aning. :P

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

## #9 — Skarre, 2005-02-11T00:39Z

I det är fallet är semantiken inte speciellt viktig eftersom designen är till ett forum (vBulletin) vars kod ändå kommer att sopa bort alla spår av semantik. ;)

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

## #10 — zcorpan, 2005-02-11T09:02Z

Men använd en tabell då! :D

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

## #11 — Skarre, 2005-07-01T12:45Z

Nu tänkte jag försöka ta tag i detta igen, men det går inge vidare. Om någon xhtml/css-mästare kunde kolla en sekund på koden och berätta vad jag gör för fel så vore jag väldigt tacksam. Det önskade resultatet är som jag nämnt tidigare ([så här](http://www.webforum.nu/attachment.php?s=&postid=999251) \+ ramar). Det funkar som vanligt i Firefox, men IE vill inte lira. Det funkar i IE om jag kör quirks mode, men det känns lite "B". Tack på förhand!

<http://member.webforum.nu/1826/vertstretch.htm>

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

## #12 — jarvklo, 2005-07-03T19:43Z

> **Skarre skrev:**
>
> Det funkar i IE om jag kör quirks mode, men det känns lite "B".

 Lev med det - MSIE är sån när det handlar om tabellcellshöjder :P

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/122119-vertikal-stretch
