Flytende footer ?

halvardm · 11. august 2004

Driver å lager en side der jeg ikke skal sette noe height. Men jeg har en footer og den vil jeg at skal bare flyte nedover etterhvert som det blir mer stoff ovenfor.. Kanskje litt merkelig forklart, men dere skjønte det vel?

Hjelp? :hmm:

lac1 · 11. august 2004

hi there, try this:

layout -> style.css

html, body, #contents {
min-height: 100%;

width: 100%;

height: 100%;

}

/*

* The "height" above is a hack for IE5+/Win. Below we adjust

* it using the child selector to hide from IE5+/Win

*/

html>body, html>body #contents {

height: auto;

}

/*

* Without this, Moz1.0 adds a vertical scrollbar

*/

body {

margin: 0;

font-family: Arial, sans-serif;

}

#contents {

position: absolute;

top: 0;

left: 0;

}

#footer {

position: absolute;

bottom: 0;

background-color: #ccffcc;

width: 100%;

text-align: center;

}

#main {

margin-bottom: 3em;

height: auto;

padding: .5em;

}

document data:

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Footer test</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<div id="contents">

<div id="main">

<p>

This has been tested and works in IE5.5+/Win,

Moz0.9.9, and Moz1.0. It does not work in Opera 6. Any suggestions

for that would be appreciated.</p>

</div>

<div id="footer">

<p>This footer will sit at the bottom of the documemnt, <strong>unless</strong> the document<br />

is shorter than the window, in which case it will sit at the bottom of the window.</p>

</div>

</div>

</body>

</html>

hope this helps..

david lacina,

http://webaudit.lacina.net

Endret 11. august 2004 av lac1

Haraldson · 11. august 2004

lac1: Er det ikke visse problemer knyttet til dette med 100% height?

Skomaker: Funker siden min noen lunde slik du vil?

Arve Systad · 11. august 2004

Driver å lager en side der jeg ikke skal sette noe height. Men jeg har en footer og den vil jeg at skal bare flyte nedover etterhvert som det blir mer stoff ovenfor.. Kanskje litt merkelig forklart, men dere skjønte det vel?

Hjelp?

Skal footer alltid ligge i bunnen av sida, eller skal footer berre bli pressa nedover når der kommer masse innhold?

Cucum(r) · 11. august 2004

Tar meg den frihet og endrer litt på lac1's forslag:

html, body, #contents {
min-height: 100%;
width: 100%;
height: auto;
_height: 100%; /* Underscore-hack (http://wellstyled.com/css-underscore-hack.html)*/
}

Endret 11. august 2004 av SirIce

halvardm · 11. august 2004

Mr. Berg; Ja, det er noe sånt jeg kunne ha tenkt meg.

Footeren skal bare bli presset nedover.. :thumbdown:

Haraldson · 11. august 2004

Footeren på siden min blir presset nedover.

Dette er en standard-layout med header, innhold/meny og footer, "hacken" kan du vel lese om her, vil jeg tro.

Logg inn

Flytende footer ?

Anbefalte innlegg

halvardm

Videoannonse

lac1

Haraldson

Arve Systad

Cucum(r)

halvardm

Haraldson

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer