Stopka zawsze na dole strony

Temat powracający jak bumerang, nie wiedzieć czemu dla wielu ciężki do zrozumienia. Poniżej prezentuje swoje rozwiązanie (a nawet dwa rozwiązania) odnośnie stopki na stale przyklejonej do dołu strony jeżeli:
a) zawartość dokumentu jest krótka i stopka na pewno nie zostanie przesunięta na dół przez content.
b) stopka ma być widoczna ciągle nad treścią strony (nawet w przypadku strony „dłuższej” niż 100% rozdzielczości ekranu).

Całe rozwiązanie rozbija się tak naprawdę o odpowiednie skonstruowanie drzewa DOM i jego ostylowanie.

Tworzymy szkielet strony

Aby uprościć sobie zadanie dla obydwu przypadków użyjemy jednego szkieletu, który będzie wyglądał następująco:

<div class="strona">
	<div class="zawartosc">
		zawartość strony
	</div>
</div>
<div class="stopka">
	<p>
		<a href="http://blog.piotrszarmach.com">powrót do bloga</a><br />
		<a href="http://piotrszarmach.com">webdesign</a>, <a href="http://piotrszarmach.com">tworzenie stron internetowych</a>
	</p>
</div>

Prosty układ, w którym nie ma żadnej filozofii.

Przykład 1

Teraz zajmiemy się rozwiązaniem przykładu który w „zajawce” wpisu oznaczyłem literką a – czyli przypadek kiedy dokument ma niewielką wysokość.
Nadajemy odpowiednie style poszczególnym elementom strony:

* {
	margin: 0;
	padding: 0;
}
	html, body {
		height: 100%;
	}
	 
	.strona{
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin-bottom: -80px;
	}
	 
	.stopka {
		clear:both; 
		width: 100%;
		background: #000;
		clear:both;
		height: 80px;
	}

W efekcie otrzymujemy taki oto wynik:
stopka zawsze na dole strony 1

Przykład 2

Zajmijmy się teraz przykładem b. Posłużymy się tym samym szkieletem strony co w wersji a.
Kod stylu CSS modyfikujemy w sposób następujący:

* {
	margin: 0;
	padding: 0;
}
	html, body {
		height: 100%;
	}
	 
	.strona{
		height: 200%;
		padding-bottom: 80px;
	}
	 
	.stopka {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #000;
		height: 80px;
	}

Oczywiście wartość height: 200% dla elementu o klasie strona dałem z premedytacją aby sztucznie wywołać scrolla na stronie ;) Efekt do obejrzenia poniżej:
stopka zawsze na dole strony 2

Stopka zawsze na dole strony
0 votes, 0.00 avg. rating (0% score)