---
title: "Fylla ut resterande utrymme"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/132590-fylla-ut-resterande-utrymme"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Mika3l"
published: "2005-08-10T23:56:28.000Z"
updated: "2005-08-11T12:22:04.000Z"
replies: 3
views: 294
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/132590-fylla-ut-resterande-utrymme"
---

# Fylla ut resterande utrymme

## #1 — Mika3l, 2005-08-10T23:56Z

Har tre divar med bestämd höjd, nedanför dessa så vill jag ha en div som tar den plats som är kvar så att hela webbläsarfönstret fylls om informationen inte skulle räcka till. Vill även ha ett mellanrum på 20px om informationen väl skulle räcka.
Hur ska jag gå till väga (om det ens är möjligt)?

```
<div id="top" style="position: absolute; height: 15px; width: 700px; background: #DBDCDD; top: 0px; left: 0px;">
&nbsp;
</div>

<div id="logo" style="position: absolute; width: 700px; height: 130px; top: 15px; left: 0px;">
<img src="images/logo.jpg" alt=" DE TRE VÄNNERNA OCH JIMMY " style="width: 700px; height: 130px; border: 0px;" />
</div>

<div id="menu" style="position: absolute; width: 700px; height: 25px; top: 145px; left: 0px; background: #DBDCDD;">
<table cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td style="width: 15px;">
&nbsp;
  </td>
  <td style="width: 685px; height: 25px;" valign="middle">
<a href="#" class="menu">STARTSIDAN</a>
<a href="#" class="menu">OM OSS</a>
<a href="#" class="menu">BILDARKIV</a>
<a href="#" class="menu">HÖ-T-T-SCH-T</a>
<a href="#" class="menu">LISTOR</a>
<a href="#" class="menu">PÅ GÅNG</a>
  </td>
 </tr>
</table>
</div>

<div id="content" style="position: absolute; width: 700px; height: 100%; left: 0px; top: 170px; background: #EEEEEE;">
Hej hej!
</div>

<div id="verticalline" style="position: absolute; width: 1px; height: 100%; background: #C1C1C1; left: 700px; top: 0px;">
</div>
```

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

## #2 — Calevan, 2005-08-11T00:24Z

Det låter onekligen som du vill göra ungefär det jag ville här:
<http://www.webforum.nu/showthread.php?s=&threadid=129332&forumid=12>

och det verkar som det inte gick att göra, så det ser nog mörkt ut. men kanske någon här kläcker något smart.

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

## #3 — Mika3l, 2005-08-11T00:26Z

Läste den tråden precis! :o

Men jag funderar på om det inte går att fixa m.h.a margin-bottom. Testade att sätta margin-bottom till +/-170px men det hjälpte inte, men det kanske går att utveckla på något sätt?

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

## #4 — Mika3l, 2005-08-11T12:22Z

Löste det hela m.h.a z-index.

Numera så ser min kod ut så här:

```
<div id="logo" style="position: absolute; width: 700px; height: 130px; top: 0px; left: 0px; z-index: 2;">
<img src="images/logo.jpg" alt=" DE TRE VÄNNERNA OCH JIMMY " style="width: 700px; height: 130px; border: 0px;" />
</div>

<div id="menu" style="position: absolute; width: 700px; height: 25px; top: 130px; left: 0px; background: #DBDCDD; border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; z-index: 2;">
<table cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td style="width: 15px;">
&nbsp;
  </td>
  <td style="width: 685px; height: 25px;" valign="middle">
<a href="#" class="menu">STARTSIDAN</a>
<a href="#" class="menu">OM OSS</a>
<a href="#" class="menu">BILDARKIV</a>
<a href="#" class="menu">HÖ-T-T-SCH-T</a>
<a href="#" class="menu">LISTOR</a>
<a href="#" class="menu">PÅ GÅNG</a>
  </td>
 </tr>
</table>
</div>

<div id="contentbackground" style="position: absolute; width: 700px; height: 100%; left: 0px; top: 0px; background: #EEEEEE; z-index: 1;">
&nbsp;
</div>

<div id="content" style="position: absolute; width: 640px; left: 30px; top: 180px; z-index: 2;">
Hej hej!
</div>

<div id="verticalline" style="position: absolute; width: 1px; height: 100%; background: #C1C1C1; left: 700px; top: 0px; z-index: 2;">
</div>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/132590-fylla-ut-resterande-utrymme