Forum PHP.pl

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

Google: sticky footer

[HTML] pobierz, plaintext 
css
 
#footer {
position: absolute;
bottom: 0;
}
[HTML] pobierz, plaintext 

Po dodaniu position: absolute do CSS stopka jakby się zmniesza(chudsza) i wędruje do góry. Nie dałoby się jakoś inaczej? Przy sticky footer to w ogóle już cała strone się rozjeżdża.

position: fixed;
bottom: 0;

Musisz tylko ustawić kontener z treścią aby był wyśrodkowany

[PHP] pobierz, plaintext 
html, body {height: 100%;}
 
#wrap {min-height: 100%;}
 
 
#footer {position: relative;
	height: 150px;
	clear:both;} 
}
[PHP] pobierz, plaintext 

Wydaje mi się że topowinno zadziałać, ale pozostała treść , czyli #wrap powinna mieć min-height 100%

Niestety nie działa ;/

Zawsze jest problem ze stopką, bo nie wiadomo w jakiej rozdzielczości i jakiej wielkości jest ekran monitora.
ale sprawdź sobie jeszcze to:
http://www.cssstickyfooter.com/

[HTML] pobierz, plaintext 
#footer {
background: url(images/twilight/footer.png) repeat-x;
padding-top: 13px;
border-radius: 10px 10px 0px 0px;
margin-top: 10px;
width: 100%;
bottom: 0;
position: absolute;
padding-bottom: 13px;
}
[HTML] pobierz, plaintext 

jest na 100% ale nie ma odstępu od lewej strony dla tekstu

dodaj jeszcze 1 div tam gdzie masz tekst i zrób mu "padding-left:13px;

Panowie, ale to jest tylko jedna z wielu stron i zapominacie, że będą również strony, które zawierają więcej treści. Wtedy proponowane przez was rozwiązania, jak pozycjonowanie absolutne, czy ustawione (fixed) nie zdadzą egzaminu. Pierwsze spowoduje, że strona będzie się "rozjeżdżać", a drugie w ogóle służy do czegoś innego. Sticky footer to bardzo dobre rozwiązanie, ale wymaga przeprogramowania strony. Poza sticky footer nie ma dobrego rozwiązania dla problemu @Niedowiarka, choć pewną alternatywą może być JavaScript i obliczanie wszystkich niezbędnych wartości (wysokości bloków, pozycja w osi y).

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