Avatar billede fuglen Nybegynder
01. oktober 2009 - 15:44 Der er 3 kommentarer

footer div skal fylde ud i højden

Hej.

Jeg har et problem med footeren på min side, under en wrapper der pakker hele sidens indhold ind. Footeren skal fylde ud i højden. Jeg har følgende style:

- - - - - - - - -

html {
  width:100%;
  height:100%;
}

body {
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
  background: #000000;
}

#wrapper {
  width:100%;
  background: #ffffff;
}

#footer {
  position:absolute;
  top:inherit;
  width:100%;
  height:100%;
  background: #cccccc;
}

- - - - - - - - -

<body>
<div id="wrapper">
</div>
<div id="footer">
</div>
</body>

- - - - - - - - -

Men min footer bliver stadig 100%, altså hele browserens højde, og tar ikek højde for den plads som wrapperen har snuppet ovenover.

Nogen ideer?
Avatar billede ebusiness Nybegynder
01. oktober 2009 - 23:14 #1
Jeg kan ikke lige komme på en måde at gøre det på uden JavaScript, har du virkelig brug for en div som er præcist den resterende plads i højden? Et alternativ er at lave footeren i fuld højde og placere den bag wrapperen.
Avatar billede faerch Nybegynder
04. oktober 2009 - 12:14 #2
Jeg er forholdsvis grøn m. html, men det ser ud til at du i ovenstående fortæller at footeren skal fylde 100% i højden også..


Hvis jeg forstår dig rigtigt er det du egentlig ønsker noget lignende mht. højden:

page: 100%
wrapper: ? %;    (ukendt højde)
footer: 100-?%;  (resten)

<div id="page">
  <div id="wrapper">
  </div>
  <div id="footer">
  </div>
</div>


Ved godt at tabeller af nogle er bandlyst til layout, men formoder at det vil kunne løses problemet? Hvis du sætter tabelhøjden til 100% og laver 2 rækker med hhv. wrapper og footer...
Avatar billede ebusiness Nybegynder
04. oktober 2009 - 13:49 #3
Selvfølgelig, tak faerch. Her er en tabelløsning, og enhver som er imod tabeller er velkommen til at vise hvorledes det gøres uden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html{
    height:100%;
    width:100%;
}
body{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}
</style>
</head>
<body>
<table style="height:100%;background:red;width:100%" border="0" cellpadding="0" cellspacing="0">
<tr style="background:green;">
<td>
eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>eee<br>
</td>
</tr>
<tr style="height:100%;background:blue;" valign="bottom">
<td>
eee
</td>
</tr>
</table>
</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester