Footer i botten på webbsidan?

2011-06-12 17:34

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Footer i botten på webbsidan?

Har nu googlat och försökt lösa mitt problem i timmar men nu har jag tröttnat så hoppas kunna få lite hjälp.

Det jag vill göra är att få diven footer att visas längst ner på skärmen även om diven content inte fyller upp skärmen. Om content är större än skärmen ska footer följa med.

Med andra ord vill jag att content fylls ut så den täcker resterande del av skärmen med css utan att använda tabeller och helst inte javascript.

|--------------------------------------------------------|
|
|
|
| Content
|
|
|
|
|--------------------------------------------------------|
| FOOTER
|--------------------------------------------------------|

Jag har testat massa olika varianter med wrappers runt och utan osv, absolut possitionering men jag lyckas inte uppnå det jag söker.

Följande kodstycke gör att en wrapper div kan nå 100%. Önskar att det var lika lätt som det är på frames genom att sätta en * för att fylla ut resten.

html, body
{
height: 100%;
border: 0;
padding: 0;
margin: 0;
}

EDIT: Enda kravet jag har är att det ska fungera i senaste firefox, ie9, opera och chrome.

Senast redigerat 2011-06-12 17:39

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-06-12 18:03

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

html, body {min-height:100%}
#footer {position:fixed; bottom:0}

Borde fungera.

edit: det är position:absolute du ska ha naturligtvis. Följande fungerar bra:

html {height:100%;}
body {min-height:100%; position:relative;}
#wrapper {padding-bottom:100px; overflow:hidden;} /* Samma som höjd på #footer */
#footer {height:100px; position:absolute; bottom:0; width:100%;}

#wrapper omsluter hela sidan.

Senast redigerat 2011-06-12 18:25

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2011-06-12 18:44

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Tackar så hemskt mycket, fungerade nästan 100.

Enda är om inte texten fyller ut helt så blir det ett mellanrum till footern.

Senast redigerat 2011-06-12 18:49

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-06-12 18:54

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av Pzyber:

Tackar så hemskt mycket, fungerade nästan 100.

Enda är om inte texten fyller ut helt så blir det ett mellanrum till footern.

Gå till inlägget

Hur menar du? Om du har sidan upplagd kan jag ta mig en titt, annars kan kod också fungera.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2011-06-12 19:05

Permalänk

Marwelln

Medlem

Registrerad: Jan 2008

●

Det du söker efter är Sticky Footer: http://ryanfait.com/sticky-footer/

Rapportera Redigera

Citera flera Citera

2011-06-12 19:09

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Skrivet av Teknocide:

Hur menar du? Om du har sidan upplagd kan jag ta mig en titt, annars kan kod också fungera.

Gå till inlägget

Det är min-height som inte verkar gå på wrapper förutom i opera.

Kan ladda upp sidan på webbservern, länk kommer om någon min.

Edit: länken http://www.pzyber.net/makastrotest/
Mycket tidig version som du ser

Grejar lite med menyn samtidigt så kan bli lite olika där. Klickar du på verksamhet så får du med mer innehåll i content. Då visas det fint. MAK så får du vanliga med mindre i content.

Skrivet av Marwelln:

Det du söker efter är Sticky Footer: http://ryanfait.com/sticky-footer/

Gå till inlägget

Nja den behöver nödvändigtvis inte synas förräns man scrollar ner om det är mycket innehåll på sidan.

Senast redigerat 2011-06-12 19:21

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-06-12 21:59

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Skrivet av Marwelln:

Det du söker efter är Sticky Footer: http://ryanfait.com/sticky-footer/

Gå till inlägget

Löste det nu, den hjälpte en hel del fast fick tänka om hur jag skulle sätta bakgrunder osv.
Tackar så mycket.

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-06-12 22:09

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av Pzyber:

Grejar lite med menyn samtidigt så kan bli lite olika där. Klickar du på verksamhet så får du med mer innehåll i content. Då visas det fint. MAK så får du vanliga med mindre i content.

Gå till inlägget

Då tror jag att jag förstår vad du menar. Problemet är (eller var) att du vill att wrappern ska nå hela vägen ner till footer. Detta går att lösa på ett udda sätt genom att sätta bakgrund, width och margin:0 auto på body och en annan bakgrundsfärg på html. Bodyn blir alltså "papperselementet". #wrapper blir i detta fall ett verktyg för att se till att footern inte lägger sig över annan text, genom dess padding-bottom.

Tillägg till tidigare CSS:

html {background:#283240;}
body {background:#CBCBCE; margin:0 auto; width: 938px;}

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2011-06-12 23:13

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Skrivet av Teknocide:

Då tror jag att jag förstår vad du menar. Problemet är (eller var) att du vill att wrappern ska nå hela vägen ner till footer. Detta går att lösa på ett udda sätt genom att sätta bakgrund, width och margin:0 auto på body och en annan bakgrundsfärg på html. Bodyn blir alltså "papperselementet". #wrapper blir i detta fall ett verktyg för att se till att footern inte lägger sig över annan text, genom dess padding-bottom.

Tillägg till tidigare CSS:

html {background:#283240;}
body {background:#CBCBCE; margin:0 auto; width: 938px;}

Gå till inlägget

Jo du förstår nug hur jag menar. Från början hade jag dessutom footern inuti wrappern och försökte få content att göra jobbet vilket var rent vansinne

Det fungerar nu iaf, du kan se resultatet på http://www.pzyber.net/makastrotest/index.php
klicka på verksamhet för att se med innehåll i content.

Nu är det bara mer tillsnyggande och sen koda rasket då, puh

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-06-12 23:30

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av Pzyber:

Jo du förstår nug hur jag menar. Från början hade jag dessutom footern inuti wrappern och försökte få content att göra jobbet vilket var rent vansinne

Det fungerar nu iaf, du kan se resultatet på http://www.pzyber.net/makastrotest/index.php
klicka på verksamhet för att se med innehåll i content.

Nu är det bara mer tillsnyggande och sen koda rasket då, puh

Gå till inlägget

Kul att det fungerar bra!
#footer inuti #wrapper ska fungera så länge du låter position vara default på #wrapper (position:static). #footer kommer då att placera sig utifrån bodys dimensioner, då detta element har position:relative;

Senast redigerat 2011-06-13 00:13 skrev fel

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2011-06-12 23:32

Permalänk

Pzyber

Medlem ★

Plats: 185.88.137.2
Registrerad: Jan 2006

●

Skrivet av Teknocide:

Kul att det fungerar bra!
#footer inuti #wrapper ska fungera så länge du låter position vara default på #wrapper (position:static). #wrapper kommer då att placera sig utifrån bodys dimensioner, då detta element har position:relative;

Gå till inlägget

Tackar för hjälpen och förklaringen. Alltid bra att veta flera lösningar

Visa signatur

Rapportera Redigera

Citera flera Citera

Footer i botten på webbsidan?

Footer i botten på webbsidan?

Externa nyheter

Spelnyheter från FZ