WN - HJÄLP: Footer att stanna på botten

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - HJÄLP: Footer att stanna på botten (https://www.wn.se/forum/showthread.php?t=1050538)

HJÄLP: Footer att stanna på botten

Hallå!
Jag har stött på ett problem och hittade en metod som fungerar utmärkt på min vanliga burk, både i Firefox/Chrome/IE. Men på min bärbara och andra datorer så vägrar den att i Internet Explorer sätta sig på botten..

Jag använde detta sättet http://ryanfait.com/resources/footer...ottom-of-page/.

Jag använder förövrigt

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http//www.w3.org/TR/html4/strict.dtd">

som doctype.

Någon som vet något annat sätt att få footern att stanna på botten?
Någon som kan hjälpa mig?

Tacksam för svar,
kCAB

Hej där,

Jag har själv slitit håret med detta och det GÅR att få det att fungera (trots att webben inte är konstruerad för det och det egentligen inte bör gå) - men det räcker med att du har ett element någonstans inne i din kod med en olämplig top-margin för att allt skall gå åt skogen.

Tycker verkligen du skall tänka om din design om du har möjlighet.

Tack för svaret!

Det jag egentligen är ute efter är när någon zoomar ut i webbläsaren så vill jag att footern alltid ska stanna på botten, men jag har fortfarande möjligheten att låta footern vara på botten i vanlig skala.

Ok, så om du verkligen vill få detta att fungera så måste du göra på följande sätt:

Börja med exemplets minimalistiska kod. Lägg sedan till en nivå html, nivå för nivå tills du hittar där din markup sabbar exemplet. Inga genvägar finns.

Här har du ett exempel som fungerar på allt som jag har testat den på.

HTML-kod:

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Sajt</title>

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

</head>



<body>



        <div id="wrapper">

        

        

                <div id="header">

                        <div id="header_960">

                                <p>header</p>

                        </div>

                </div>

                

                

                <div id="content">

                        <div id="content_960">

                                <p>content</p>

                        </div>

                </div>

                

                

        </div>

        

        

        <div id="footer">

                <div id="footer_960">

                        <p>footer</p>        

                </div>

        </div>

        



</body>

</html>

HTML-kod:

body, html{

        height: 100%;

        }



body, p {

        margin: 0; padding: 0;

        }        



#wrapper {

        min-height: 100%;

        }



* html #wrapper {

        height: 100%;

        }

        

#header {

        width: 100%;

        background: #666;

        }



#header_960 {

        width: 960px;

        height: 100px;

        margin: 0 auto;

        position: relative;

        overflow: hidden;

        }

        

#footer {

        width: 100%;

        height: 100px;

        margin: -100px auto 0 auto;

        position: relative;

        background: #666;

        }



#footer_960 {

        width: 960px;

        height: 100px;

        position: relative;

        margin: 0 auto;

        }

        

#content {

        width: 100%;

        padding-bottom: 100px;

        }

        

#content_960 {

        width: 960px;

        margin: 0 auto;

        overflow: hidden;

        }