Najbardziej wydajny i kompatybilny sposób na osiągnięcie zadokowanej stopki - html, css, sticky-footer

Próbuję wykonać następujące czynności w szablonie CSS:

1. Dokowanie stopki do dołu, gdy nie ma wystarczającej ilości treści wypełnij stronę
2. Rozciągnij tło nagłówka i stopki na całej szerokości
3. Umieść całą zawartość na środku strony

Oto kod, który stworzyłem z pomocą tutaj: http://tinkerbin.com/lCNs7Upq

Moje pytanie brzmi: widziałem kilka sposobów, aby to osiągnąć. Czy to jest najlepsze? Szkoda, że ​​muszę mieć również pusty div, czy to bodge?

Odpowiedzi:

Możesz naprawić i przypisać stopkę za pomocą CSS:

position: fixed;
bottom: 0;

Próbuję jednak dowiedzieć się, co dokładnie próbujesz zrobić.

Nagłówek i stopka powinny automatycznie przejść w 100% przez stronę, jeśli jest to div.

Twoja środkowa sekcja może być ustawiona na wysokość: automatyczny; przez css i wypełni rzutnię, przesuwając stopkę do samego końca, ale aby to zrobić, musisz również ustawić ciało na 100%, aby działało.

html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}

Twój HTML powinien wyglądać mniej więcej tak:

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

Przykład roboczy: http://jsfiddle.net/s4rT3/1/

To jest najlepszy przykład, jaki widziałem:

http://css-tricks.com/snippets/css/sticky-footer/