Footer na dole strony

[Ambroz]

Witam szanowne forum.

Posiadam 2 strony, z czego jedna jest krótka a druga długa.
Na stronie krótkiej stopka, czy jak kto woli footer, znajduje się zaraz pod tekstem i pozostawia sporo wolnego miejsca. Na długiej stronie nie ma tego problemu.
Moje pytanie brzmi, czy da się jakiś jednym sposobem "przypiąć" footer na samym dole strony?

Próbowałem już robić na footerze positon absolute czy też fixed, ale niestety to nie pomaga, gdyż na długiej stronie zasłania on tekst.

Proszę o pomoc, gdyż sam już pomysłu nie mam. Jedyny jaki mam to zrobić 2 osobne klasy dla długiej i krótkiej strony.

[rkonik]

Co rozumiesz pod pojęciem

"przypiąć" footer na samym dole strony?
Footer w dosłownym tłumaczeniu to stopka i jest na dole. Możesz podać link do tych stron?

[zwiastun]

Domyślam się, że chodzi o "przypięcie" do dolnej krawędzi okna przeglądarki

[Ambroz]

Podać linka nie mogę.
"Przypięcie", czyli umieszczenie footera na dolnej krawędzi ekranu.

Rkonik:
Jak na stronie masz tylko Top-A i Footer to chce zmusić footer by był przypięty do dolnej krawędzi ekranu, ale jeśli przeniosę się na stronę z większą ilością blików to by nie zasłaniał zawartości, która jest w innych modułach.

[rkonik]

ale jeśli przeniosę się na stronę z większą ilością blików
Masz na myśli stronę responsywną czy coś jeszcze innego?

Jeżeli dobrze ciebie rozumiem to ja bym zrobił tak:


position: fixed;
bottom: 0;


To też może nie do końca zadziałać bo jak strona będzie większa niż ekran na którym jest wyświetlana wówczas footer przysłoni część strony. Ważne jeszcze jak zastosujesz z-index

[Ambroz]

Obecnie mam coś takiego:


.footer_holder{
background-color: #2e2c53;
color: white;
position:fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
}


A tak to wygląda na stronie:
Długa Strona
9344

Krótka strona
9345

[rkonik]

Coś jest nie tak z załącznikami nie można ich odtworzyć.

[Ambroz]

Długa Strona:
9346

Krótka strona:
9347

P.S poradziłem sobie dodając klasę short do strony z takimi parametrami:


.short .footer_holder{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
right: 0;
}