---
title: "Sidfots trubbel med DIV & CSS"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/96434-sidfots-trubbel-med-div-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "joel_sundkvist"
published: "2004-02-02T23:52:28.000Z"
updated: "2004-02-06T14:44:18.000Z"
replies: 12
views: 717
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/96434-sidfots-trubbel-med-div-css"
---

# Sidfots trubbel med DIV & CSS

## #1 — joel_sundkvist, 2004-02-02T23:52Z

Försöker göra en sida utan tabeller vilket inte visat sig vara det lättaste... ;) 
Vill att sidfoten skall hamna längst ned på sidan (läs: skärmen) om innehållet är "lite". Om innehållet kräver scroll skall sidfoten hamna längst ned på sidan (efter att man scrollat genom innehållet). 

Det jag hittills lyckats åstadkomma liknar nån slags "dålig-kvasi-frames lösning" där sidfoten täcker över lite av innehållet när man scrollat längst ned... inte snyggt... x( 

Ett annat problem är ju som bekant IE 5 Mac. Har en särskild stilmall  som jag så elegant importerat in m h a en *bugg* i den browsern: 

```
<style type="text/css">
@import("style2_ie_mac.css");
</style>
```

 *"url"* saknas som ni kanske ser... Kul lösning som verkar funka utan javascript och dyl. :)

Sidan kan ses på: <http://hem.bredband.net/joesun/ws/valkommen2.html>

Här kommer lite css...

IE 5 Mac:

```
html, body {

	background-image:url(gfx/bg.gif);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #666;
	}

#content {
	padding:0;
	margin-left: 0;
	}

#header {
	color: #006;
	border-bottom: 1px solid #006;
	margin-bottom: 0px;
	}
	
#footer {
	position:fixed;
	bottom:0;
	background-color: #363636;
	border-top: 1px solid #666;
	font-family: Verdana, Arial,Helvetica, Sans-Serif;
    font-size:11px;
    line-height:15px;
	text-align: right;
	padding: 2px 10px 5px 0;
	clear: both;
	color:#bbb;
	}
```

 

och "vanliga" stilmallen:

```
html, body {
	height:100%;
	width:100%;
	background-image:url(gfx/bg.gif);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #666;
	}

#content {
	padding:0;
	margin-left: 0;
	}

#header {
	color: #666;
	margin-bottom: 0px;
	}
	
#footer {
	position:fixed; 
	bottom:0;
	width:100%;
	background-color: #363636;
	border-top: 1px solid #666;
	font-family: Verdana, Arial,Helvetica, Sans-Serif;
    font-size:11px;
    line-height:15px;
    text-align: right;
	padding: 2px 10px 5px 0;
	clear: both;
	color:#bbb;
	}
```

 

Som jag har förstått det så kräver IE mac *position:fixed;* för detta resultat. Det jag alltså är ute efter är att sidfoten skall anpassa sig efter innehållet. 

*Lite innehåll = sidfoten längt ned på skärmen.* 

*Mycket innehåll = sidfoten längst ned på sidan efter allt innehåll scrollats igenom.* 

Nån som vet?

Edit: Verkar funka på IE 6 för Windows. Sitter själv på mac så det är svårt att kolla liksom. Någon som har en aning?

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

## #2 — joel_sundkvist, 2004-02-03T23:54Z

Ingen som vet?

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

## #3 — PepeJeria, 2004-02-04T12:27Z

Antingen det ena eller det andra skulle jag säga. 
Vad du skulle kunna göra är att lösa det med javascript, fast det känns väl ändå som en rätt onödig lösning?

typ att du kolla sidan höjd med javascript och beroende på hur mycket innehåll det finns välja olika css-klasser på din footer-div

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

## #4 — joel_sundkvist, 2004-02-04T16:24Z

> **PepeJeria skrev:**
>
> Antingen det ena eller det andra skulle jag säga. 
> Vad du skulle kunna göra är att lösa det med javascript, fast det känns väl ändå som en rätt onödig lösning?

Precis!!

Det blir väl att gå tillbaka till tabellerna ett tag till då \*suck\* ... 
Synd att det inte funkar.  :l

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

## #5 — PepeJeria, 2004-02-04T16:33Z

Varför ska du gå tillbaka till tabeller? Hur skulle du lösa det då? Jag menar, du får väl samma problem då.

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

## #6 — joel_sundkvist, 2004-02-04T17:22Z

jag har löst det med tabeller... :)

kolla: <http://hem.bredband.net/joesun/sh/>

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

## #7 — PepeJeria, 2004-02-04T17:25Z

Ja, vad ska man säga... kommer inte på hur man kan göra detta utan tabeller och utan js...  :p 

Om någon har en lösning så vore det välidgt interessant att veta...

p.s skön design, enkel o snygg

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

## #8 — joel_sundkvist, 2004-02-04T17:58Z

> **PepeJeria skrev:**
>
> Ja, vad ska man säga... kommer inte på hur man kan göra detta utan tabeller och utan js...  :p 
> 
> Om någon har en lösning så vore det välidgt interessant att veta...
> 
> p.s skön design, enkel o snygg

Inte jag heller... och detta kanske är ett bevis på att webbläsarna inte är redo för en tabellfri miljö än  :P 

Kanske Jarvklo har nån smart lösning på detta problem?

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

## #9 — jarvklo, 2004-02-04T23:10Z

Hmm...
Vet inte om den är heltäckande - men denna variant verkar funka i MSIE6/Win och Mozilla/Win.

Funkar dessutom "skapligt" i MSIE5.x/Win såvitt jag kan se (men får där skönhetsfel i överlappningen mellan "omslag" och "sidfot" som jag inte enkelt lyckats klura bort på rak arm...)

```
<!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" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html,body {margin:0;padding:0;height:100%;text-align:center;background-color:gray}
#omslag {
  text-align:left;
  margin:0 auto 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width:300px;
  min-height:100%;
  background-color:#eeeeee;
}
#bakomfoten {
  height:20px;  /* #fotens height */
}
#foten {
  margin:-21px auto 0 auto; /* height + border-top */
  height:20px;
  width: 300px;
  border-top:1px solid black;
  margin-bottom:0;
  background-color: #cc99ee;
}
-->
</style>

<!--[if IE]>
<style type="text/css">
#omslag {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="omslag">

  <div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Maecenas quam arcu, consectetuer a, venenatis eget, pharetra quis, tortor. 
      Nulla nec tortor. Ut hendrerit congue risus. 
      Vivamus lobortis mauris ut ligula. 
      Proin sed eros vel felis tristique imperdiet. 
  </div>

<!-- tom div "bakom" sidfoten så att kanterna på #omslag "går ända ner" -->
  <div class="bakomfoten">&nbsp;</div>
</div>

<div id="foten">Sidfoten</div>

</body>
</html>
```

Jag testade att bygga på principen "Positionera ingenting, men utnyttja att man ka ha negativa värden på margin på sidfoten"

I MSIE testade jag sedan med en \<div\> som fick 100%höjd, och lade sidfoten efter med negativ margin-top... Och det funkade!

I Mozilla måste man ju köra med min-height:100% istället för height:100% (annars tappar man bakgrunden och kantlinjerna om texten scrollar i vissa fall...)

Så - för att slippa dubbla stilmallar satte jag Mozillas värden i stilmallen, och modifierade sedan height för MSIE med en villkorlig kommentar (som ju bara fukar i MSIE) innehållande en stilmall till...

Testa på:  <http://member.webforum.nu/2241/sidfotsflyt.html>

Verkar funka i "nyare läsare i Windows" - även om man verkar vara tvungen att "reloada" i Opera om man ändrar storleken på fönstret ;)

Hur är det i andra läsare på andra plattformar?

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

## #10 — PepeJeria, 2004-02-04T23:15Z

Skön lösning Jarvklo! Synd bara att det ska vara så trixigt att få till något som man så lätt kan göra med tables.

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

## #11 — jarvklo, 2004-02-04T23:24Z

When all else fails - use tables!
gammalt djungelordspråk ;)

CSS lösningar med icke-statiska koordinater ("flytande layouter") är oftast ett h\*\*e att få till och i en del fall går det ju som bekant från ett gäng trådar här i forumet överhuvudtaget inte att få till \*alla\* detaljer med enbart CSS...

Men det är ganska skoj att pilla med CSS-layouter - när man råkar ha tålamod och tid för det samtidigt ;)

Och ibland råkar man lyckas också :e

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

## #12 — joel_sundkvist, 2004-02-05T09:01Z

Mycket snygg lösning!!! 
Håller med PepeJeria :)

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

## #13 — PepeJeria, 2004-02-06T14:44Z

Lustigt, man kan nästa tro att någon på List Apart läste detta inlägg och skrev en artikel om detta!  ;) 

Kom in idag:
<http://www.alistapart.com/articles/footers/>

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/96434-sidfots-trubbel-med-div-css