[CSS]Stopka zawsze na dole Opcje

[Niedowiarek]

Witam, mam taki problem otóż nie wiem w jaki sposób mogę uzyskać taki efekt, że stopka bez względu na treść powyżej niej, jest zawsze na dole. Aktualnie, gdy cała treść strony się mieści na ekranie (nie ma suwaka) stopka idzie do góry. Tu przykład: http://workdomain.ugu.pl/showteam.php

[mbak]

Witam, odgrzewam kotleta, ale dlatego, że
znalazłem nowy sposób, na stopkę zawsze u dołu strony, niezależnie od ilości treści.
Jeśli treści będzie mało to "content" strony będzie rozciągnięty, jeśli dużo to stopka będzie normalnie, zawsze pod contentem, na końcu strony.
Otóż do dzieła:
Stopka musi być jako osobny kontener - np div.
Reszta strony albo w jednym kontenerze, albo w dwóch (nagłówek i treść), ja zakładam wersję z nagłówkiem.
Stopka oraz nagłówek na stronie zawsze mają raczej tę samą wysokość i to jest też wymagane.
Dlatego dobrze jest na sztywno ustawić wysokość tych elementów atrybutem "height". nie jest to konieczne, ale da pewność że nie popsuje to efektu końcowego.
Potem wykorzystujemy sztuczkę która jest piękna sama w sobie:
Ustawiamy wysokość min-height dla contentu strony wykorzystując funkcje calc() w CSS3 wg wzoru:
100% - wysokośćNaglowka(w px) - wysokośćStopki(w px) tak jak poniżej:

min-height: calc(100% - 150px - 149px);

i gotowe!
Rozwiązanie ma tę zaletę że nie trzeba tworzyć 10 divów i ustawiać kilkanaście atrybutów css i pilnować marginesów.
Po prostu ustawiamy minimalną wysokość contentu na cały obszar okna minus wysokość stopki i nagłówka, które są prawie zawsze stałe.
Jeśli coś jest nie tak, bo mamy poustawiane jakieś marginesy kosmiczne itp. po prostu modyfikujemy działanie dodając lub odejmując wartość marginesów.

Przykładowy kod HTML i CSS:

HTML:

[HTML] pobierz, plaintext 
<div class="naglowek">
 // tutaj treść naglowka, jakieś logo itp...
 // w css ustawiamy wysokosc height elementu na sztywno
</div>
 
<div class="content">
 //tresc strony
</div>
 
<div class="stopka">
 // tutaj treść stopki...
 // w css ustawiamy wysokosc height elementu na sztywno
</div>
[HTML] pobierz, plaintext 

CSS:

[CSS] pobierz, plaintext 
.naglowek {
 height: 150px;
}
 
.stopka {
 height: 100px;
}
 
.content {
 min-height: calc(100% - 150px - 100px);
}
[CSS] pobierz, plaintext 

Zapomniałem o jednym!!!
Żeby nie było tak różowo musimy jeszcze ustawić wysokość 100% dla strony:

[CSS] pobierz, plaintext 
html, body {
        height: 100%;
    }
[CSS] pobierz, plaintext 

Ten post edytował mbak 18.02.2015, 16:53:25