[CSS] Hoe krijg ik de footer altijd onderaan het scherm? - Softwareontwikkeling

woensdag 14 december 2005 14:13

Acties:

0 Henk 'm!

Hopla!

Topicstarter

Ik probeer een layout in css te maken waarbij de footer altijd onderaan het scherm staat. Als ik dit in tables zou doen, zou ik dit effect bereiken met:

HTML:

<table height="100%">
  <tr>
    <td>header</td>
  </tr>
  <tr>
    <td height="100%">content</td>
  </tr>
  <tr>
    <td>footer</td>
  </tr>
</table>

Momenteel heb ik de volgende pagina:

code:

<style>
body {
  margin: 0;
  color: #fff;
}

#container {
  height: 100%;
}

#header {
  background: red;
}

#content {
  height: 100%;
  background: blue;
}

#footer {
  background: lime;
}
</style>

<div id="container">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

Blijkbaar betekent "height: 100%" in css "zo hoog als de innerHeight van de browser", want als ik de browser 600px hoog maak, is #content 600px groot. Resulaat: ik moet scrollen voor de footer terwijl een scrollbar met deze hoeveelheid content helemaal niet nodig is.

Ik las op A List Apart dat je dit kunt oplossen met "#container min-height: 100%" maar dat werkt bij mij niet; waarom weet ik niet. In hetzelfde artikel wordt ook een wordaround gegeven: bereken via de DOM de hoogte van #content en geef deze door aan de css. Maar dat vind ik een wel erg ranzige oplossen. KAn iemand mij helpen met dit probleem?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 14 december 2005 14:43

Acties:

0 Henk 'm!

Salandur

Software Engineer

firefox kan dit door in de css bij de footer-div het volgende op te geven:

Cascading Stylesheet:

1 2	position: fixed; bottom: 0px;

ook moet je dan een padding-bottom opgeven met de hoogte van je footer, maar dat wordt weer niet mooi in internet explorer.

je moet dan ook een wrapper en een container in die wrapper definieeren waarmee de wrapper een hoogte heeft van 100% en de container een hoogte van auto.

ik weet jammer genoeg geen andere methode

[ Voor 21% gewijzigd door Salandur op 14-12-2005 14:45 ]

Assumptions are the mother of all fuck ups | iRacing Profiel

woensdag 14 december 2005 15:12

Acties:

0 Henk 'm!

Pendaco

Vogon Poetry FTW!

Kijk ook eens hier; fixed footer

woensdag 14 december 2005 15:25

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

altijd onderaan het browservenster of altijd onderaan het browservenster, tenzij de content langer is dan het browservenster? Het eerste los je op op de manier zoals Pendaco aangeeft, het tweede kan bijvoorbeeld op deze manier, die ik zelf wel vaker gebruik:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Only Footer</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%;  
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            padding: 0 10px;
            margin: 0 auto;
            background: #eeeeee;  
        }
        
        #container {
            width: 580px; 
            padding: 10px 0 110px 0;
        }
        
        #footer {
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px solid black;
            width: 580px;
            padding: 10px;
            height: 79px;
            background: yellow;
        }        
    </style>
    <!--[if lt IE 7]>
        <style type="text/css"> body { height: 100%; } </style>
    <![endif]-->
</head>
<body>
    <div id="container">
      <!-- Main content -->
      content hier dus
      <!-- /Main content -->
    </div>
    <div id="footer">
        <!-- Footer content -->
        footer hier dus
        <!-- /Footer content -->    
    </div>
</body>
</html>

Specs | Audioscrobbler

woensdag 14 december 2005 17:20

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

@Sappie - dank je, daar kom ik een stuk verder mee! Ik heb nu dit:

code:

<style>
body {
  background: #6B8A9C;
  padding: 0;
  margin: 0;
  min-height: 100%;
  text-align: center; /* Centreren in IE */
  }

#wrap {
  position: relative;
  width: 778px;
  margin: 0 auto; /* Centreren in FF */
  height: 100%;
  }

#page {
  background: url(background.gif) repeat-y;
  height: 100%;
  }

#header {
  height: 95px;
  }

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 778px;
  height: 79px;
  }
</style>

<div id="wrap">
  <div id="page">
    <div id="header">header</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
  </div>
</div>

Dit werkt perfect in IE en Opera (zie plaatje links) maar niet in FF. Als de content langer is dan 1 scherm, rekt de pagina in FF niet uit (zie rechts). Heeft iemand hier een oplossing voor?

Afbeeldingslocatie: http://www.danandan.luna.nl/got/fixedFooter.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/fixedFooter.gif

[ Voor 10% gewijzigd door Reveller op 14-12-2005 17:21 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 14 december 2005 17:51

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

ten eerste: ik krijg je probleem slechts gereconstrueerd in Firefox met je html/css als ik de (verplichte) DTD helemaal weg laat. Dat is uiteraard niet de bedoeling en schijnbaar rendert firefox in quirks mode dan. (wist uberhaupt niet dat er dan verschillen in rendering optreden bij firefox).

Verder ben ik je probleem ook wel eens tegengekomen; mijn ervaring is dat op een of andere manier het body element het enige element is waarmee je in alle browsers het gewenste gedrag kunt verkrijgen.

Aan je screenshots te zien heb je ook de 2 div's (met id "page" & "wrap) niet nodig en kun je om dat probleem te voorkomen deze weglaten en de body centreren (zoals ik in mijn voorbeeld ook doe).

Een andere oplossing is misschien gebruik maken van een andere manier om een css footer te bewerkstelligen: test57

[ Voor 7% gewijzigd door Sappie op 14-12-2005 17:52 ]

Specs | Audioscrobbler

woensdag 14 december 2005 18:01

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

Als ik de linkerzijde van de pagina even uitvergroot, kun je zien dat ik een plaatje gebruik om een effect te krijgen zodat het lijkt alsof de witte pagina bovenop de groene ondergrond ligt:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/borderZoomed.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/borderZoomed.gif

De #page is dus een div van 778 pixels breed. De achtergrond daarvan is een plaatje van 778 bij 1 pixels: wit in het midden, met links en rechts de "fade" zoals hierboven. Daarom heb ik die div nodig. De extra "wrap" div kan idd wel weg:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
body {
  background: #6B8A9C;
  padding: 0;
  margin: 0;
  min-height: 100%;
  text-align: center; /* Centreren in IE */
  }

#page {
  position: relative;
  width: 778px;
  margin: 0 auto; /* Centreren in FF */
  background: url(background.gif) repeat-y;
  height: 100%;
  }

#header {
  height: 95px;
  }

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 778px;
  height: 79px;
  }
</style>
</head>
<body>
<div id="page">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

Wel sta ik nu voor een raadsel - na toevoegen van de DTD werkt het in geen enkele browser meer. De footer komt nu in alle browsers direct boven de #content. Wat doe ik nu verkeerd? Mooi hoor css, maar wel vermoeiend als je nog veel te leren hebt...

Ik zal ook dat andere voorbeeld eens bekijken. Misschien staan daar nog handige dingen in

[ Voor 183% gewijzigd door Reveller op 28-10-2006 15:05 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 14 december 2005 18:24

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Op onderstaande pagina (had geen zin een heel voorbeeld te maken), die ik tijdens mijn stage heb gemaakt, heb ik iets soortgelijks toegepast aan de hand van de bovenstaande methode. Onderstaande moet het wel duidelijk maken denk:

http://www.veiligmetverf.nl

http://www.veiligmetverf.nl/images/background.gif

relevante css:

code:

body { 
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 979px;
    background: url("../images/background.gif") repeat-y 0 2px;
    min-height: 100%; 
}
        
#container {
    width: 913px;
    margin: 0 33px;
    text-align: left;
    padding: 0 0 40px 0;
}

Specs | Audioscrobbler

woensdag 14 december 2005 19:00

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

* knip * Ik dacht dat ik de oplossing had, maar dat bleek toch niet zo te zijn... wordt vervolgd

Ik heb nu dit:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
html, body, #page {
  min-height: 100%;
  height: auto;
  }

body {
  background: #6B8A9C;
  padding: 0;
  margin: 0;
  text-align: center; /* Centreren in IE */
  }

#page {
  position: relative;
  width: 778px;
  margin: 0 auto; /* Centreren in FF */
  background: url(background.gif) repeat-y;
  }

#header {
  height: 95px;
  }

#content {
  height: auto;
  }

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 778px;
  height: 79px;
  }
</style>
</head>
<body>
<div id="page">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

[ Voor 40% gewijzigd door Reveller op 28-10-2006 15:06 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 14 december 2005 19:21

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Odisys TEST</title>
<style type="text/css">
html {
    background: #6B8A9C;
  height: 100%;
  }

body {
  height: 100%;
  position: relative;
  background: white; /* hier dus de bg */
  padding: 0;
  margin: 0 auto;
  width: 778px;
  }

#page {
  width: 750px;
  margin: 0 14px; /* Centreren in FF */
  background: red;
  }

#header {
  height: 95px;
  }

#content {
  height: auto;
  }

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 778px;
  height: 79px;
  }
</style>
</head>
<body>
<div id="page">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

zo ongeveer dus. De background pas je dus toe op de body. Wel dien je nog even er rekening mee te houden dat IE min-height niet ondersteund.

[ Voor 36% gewijzigd door Sappie op 14-12-2005 19:22 ]

Specs | Audioscrobbler

woensdag 14 december 2005 20:24

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

@Sappie: er zijn twee problemen met de code die je als laatste gaf. Hierboven zie je dat de #header (lime gekleurd) mooi in het midden van de #page staat (links). Bij FF (en Opera) is dat niet zo (zie plaatje 2). Het tweede probleem is dat als de content zolang is de pagina een scrollbalk krijgt, FF en Opera de footer niet naar beneden duwen (plaatje 3).

Afbeeldingslocatie: http://www.danandan.luna.nl/got/wrongAgain.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/wrongAgain.gif

Het eerste probleem (header in het midden krijgen) heb ik getracht op te lossen door regel 22 ( margin: 0 14px;) te vervangen door margin: 0 auto; maar dat werkt niet. Betekent dit dat ik die header absoluut in het midden moet zetten door die 14px te vervangen in bv 30px, net zolang tot de header in het midden staat?

Het lijkt wel alsof het een of-of verhaal is. OF de pagina doet het helemaal goed in IE, maar in zijn geheel niet in FF / Opera OF de pagina doet het in FF (mbv min-height) maar niet in IE. Kent iemand misschien de oplossing voor dit probleem?

Edit: na wat gepruts kwam ik hier op uit (naar een voorbeeld van AListApart. Dit werkt perfect in FF / Opera maar niet in IE. Toch wel om gek van te worden. Welke goeroe weet waar het in alle voorbeelden hierboven voud gaat?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
html {
  background: #6B8A9C;
  height: 100%;
  }

body {
  height: 100%;
  padding: 0;
  text-align: center;
  margin: 0 auto;
  width: 778px;
  }

#page {
  background: url(background.gif) repeat-y;
  position: relative;
  min-height: 100%;
  width: 778px;
  }

#header {
  height: 95px;
  background: lime;
  }

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 778px;
  height: 50px;
  }
</style>
</head>
<body>
<div id="page">
  <div id="header">header</div>
  <div id="content">dwdsa</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

[ Voor 64% gewijzigd door Reveller op 14-12-2005 21:10 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 14 december 2005 21:50

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

heb het idee dat ik de oplossing al gegeven heb, maar hier nogmaals (getest in FF 1.5, IE 6.0 en Opera 8.0 en in het verleden al eens in Safari (1.3 dacht ik.. iig op het moment dat goed min-height ondersteund werd)) :

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Odisys TEST</title>
    <style type="text/css">
        html {
            background: gray;
            height: 100%;
        }
        
        body {
            min-height: 100%;
            position: relative;
            background: white;
            padding: 0;
            margin: 0 auto;
            width: 778px;
        }
        
        #content {
            width: 750px;
            margin: 0 14px;
            padding: 0 0 79px 0;
        }
        
        #header {
            height: 95px;
            width: 750px;
            margin: 0 14px;
            background: lime;
        }
            
        #footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 778px;
            height: 79px;
            background: red;
        }
    </style>
    <!--[if lt IE 7]>
        <style type="text/css"> body { height: 100%; } </style>
  <![endif]-->
</head>
<body>
    <div id="header">header</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</body>
</html>

edit:
ff opgeschoond

[ Voor 31% gewijzigd door Sappie op 14-12-2005 21:59 ]

Specs | Audioscrobbler

donderdag 15 december 2005 18:51

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

@Sappie - bedankt! Met de IE conditie erin werkt het perfect. Ik heb je styleblock in een apart css bestand gezet dat ik nu in de pagina aanroep. Is er een manier om die statement in de stylesheet zelf op te nemen? Ik zoek momenteel op Google, maar heb tot nu toe alleen voorbeelden gezien buiten de stylesheet om.

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 15 december 2005 19:10

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Conditional comments zijn IE only en kunnen alleen in de html opgenomen worden. Ik gebruik ze eigenlijk alleen op mn css valid te houden; je zou uiteraard ook gebruik kunnen maken van bijvoorbeeld de underscore hack die gebruik maakt van een IE parse bug, maar conditional comments zijn netter.

Specs | Audioscrobbler

zaterdag 17 december 2005 15:11

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

Als ik nu een pagina wil bouwen met 2 kolommen, wat is dat een goede opzet?

code:

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div id="footer">footer</div>

of

<div id="header">header</div>
<div id="content">
  <div id="sidebar">sidebar</div>
  <div id="main">main</div>
</div>
<div id="footer">footer</div>

De tweede manier lijkt mij netter, omdat header, content en footer als horizontale "rijen" gezien kunnen worden. In de content-rij maak je dan 1 of meerdere (verticale) kolommen aan. Klopt deze gedachte volgens jullie?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."