Forum PHP.pl > [HTML][CSS] Stopka na dole strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Stopka na dole strony

Macok

13.09.2008, 11:18:23

Mam problem ze stopką na stronie.
Jeżeli treść strony jest dłuższa niż wysokość ekranu to stopka prawidłowo ustawia się na dole.
Ale co zrobić, żeby ustawiała się na dole również gdy treść strony jest krótsza?
Próbowałem czegoś takiego:

[HTML] pobierz, plaintext 
position: absolute;
bottom: 0;
[HTML] pobierz, plaintext

Ale wtedy zawsze ustawia się na dole okna przeglądarki i jeżeli treść jest długa to najeżdza na resztę strony.

kazag

13.09.2008, 12:05:12

ja robiąc stopkę umieszczam ją divie zawierającym całą stronę i nadaje

Kod

clear:both;

, dzięki czemu stopka, bez zadnych absolutów, zawsze jest od razu pod trescią, nawet, jeśli treść ma jedną linijkę.

Macok

13.09.2008, 12:25:58

No wiem że wtedy jest pod treścią, ale chodzi mi o to żeby była zawsze na samym dole okna przeglądarki, a w ten sposób co ty mówisz to jeżeli treść będzie miała 1 linijke to stopka ustawi sie gdzieś na środku strony

Szunaj85

13.09.2008, 13:32:15

Spróbuj na div-ach. Najprościej jeśli div-y na stronie będą pozycjonowane względem siebie. Stopkę robisz w prosty sposób i zawsze powinna wyświetlać się na samym dole strony:

[HTML] pobierz, plaintext 
div {
  position: relative;
}
#stopka {
  clear: both;
}
[HTML] pobierz, plaintext

Macok

13.09.2008, 20:44:27

Czyli mam ustawić "position: relative" dla wszystkich div'ów na stronie!?

Shili

13.09.2008, 21:55:36

Nie, nie trzeba

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
 
<style>
    * {margin: 0; padding: 0;}
    html {height: 100%;}
    body {position: relative; text-align: center; min-height: 100%; height: auto !important; height: 100%;}
    #main {width: 500px; margin: 0 auto; padding-bottom: 30px; text-align: left;}
    #content {border: solid 1px black; padding: 10px;}
    #footer {border: solid 1px red; width: 500px; position: absolute; bottom: 0; left: 50%; margin-left: -250px;}
</style>
</head>
<body>
    <div id="main">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo ante, lacinia nec, dignissim nec, posuere quis, augue. Donec dignissim. Mauris sem eros, pellentesque et, pulvinar vulputate, varius eget, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Sed eu est. Ut fringilla ligula. Nullam vehicula tellus vitae erat. Donec orci. Nam quis pede. Vivamus eleifend metus vel diam. Ut vulputate turpis nec nisl. Donec neque leo, faucibus in, ornare eu, semper a, massa.<br/>
        </div>
    </div>
    <div id="footer">
        A tutaj stopka.
    </div>
</body>
</html>
[HTML] pobierz, plaintext

Oto przykład. Na IE6 nie radzę wchodzić - sam kod działa, jeśli tekstu od początku do końca jest tyle samo, to znaczy jeśli nie jest dodawany dynamicznie, jak w tym przykładzie. Innymi słowy normalnie będzie działać jak trzeba, w przykładzie z bliżej mi nieznanych przyczyn źle renderuje.

Wiem, że jest to na position: absolute, co może się nie spodobać, jednakże nie widzę innego wyjścia, żeby zawsze był na dole strony, bez względu na ilość tekstu. No chyba, że w grę wchodzi java script, ale to rozwiązanie, chociaż może nie do końca eleganckie zadziała nawet tam gdzie js jest wyłączona ^^
Poza tym było to wspomniane już w pierwszym poście, więc chyba nie ma nic przeciwko

-Macok-

14.09.2008, 16:00:22

Próbowałem tym sposobem, ale zobacz co się stanie jak treść strony będzie długa i przekroczy wysokość ekranu.
Stopka zakryje treść

Shili

14.09.2008, 16:34:13

Naprawdę próbowałeś? Poklikaj sobie na przykładzie na "dodaj więcej treści" (jak już pisałam - pod ie6 ma problemy z dynamicznym dokładaniem treści, więc tak nie radzę próbować, ale normalnie działa) i sprawdź.

U mnie podany w przykładzie sposób działa na Firefoksie 3, Operze 9.51, Chromie, IE6/7 i Safari. I w żadnym stopka nie przykrywa treści.

Macok

14.09.2008, 21:05:21

No dobra dzięki, spróbuje.
Zadam jeszcze 1 pytanie troche z innej beczki:
Chcę żeby wysokość mojej strony zawsze byla rowna wysokości ekranu.
Mam 2 divy treść i stopkę.
Jeżeli ustawie w treści height: 70%; w stopce height: 20%; a między nimi margin: 10%; to będzie działać?
A jeżeli nie to jak osiągnąć taki efekt?

Shili

14.09.2008, 21:09:11

Cytat

Jeżeli ustawie w treści height: 70%; w stopce height: 20%; a między nimi margin: 10%; to będzie działać?

Będzie. A na czymś Ci nie działa? Aż z ciekawości sprawdziłam to na najpopularniejszych przeglądarkach i każda dobrze renderuje 0o

Macok

14.09.2008, 21:16:41

No dobra dzięki koniec tematu.
Oczywiście punkcik dla ciebie

rybik

14.09.2008, 21:50:40

Kilka uwag które moga sie przydac przy okazji:

- height: ileś% zadziała tylko gdy nadrzędny element ma ustawioną wysokość (może mieć też w %), nie dotyczy tagu <html> który wysokości nie musi mieć, żeby body mogło używać

- floatujące elementy bez ustawionej wysokości lubia pozbawiać nadrzędnego diva wysokości automatycznej, wynikającej z treści w środku, tak jakby zewnętrzny miał height 0, pomimo, ze wewnętrzny ma 3 akapity tekstu. Zwykle pomaga div środkowy z clear:both

- poprawny kod powinien zawierać position: relative dla każdego floatera

Macok

15.09.2008, 20:01:24

Chce dopasować wysokość strony do wysokości ekranu i mam problem.
Jak już napisał rybik, aby ustawic wysokość elementu na x%, to nadrzedny element musi mieć ustawioną wysokość.
I tu problem, bo nie wiem jak wysoki jest ekran użytkownika, a jak daje 100% to nie działa.
Co zrobić?

Shili

15.09.2008, 20:28:28

Podaj cały kod - zobaczy się. Bo działać powinno

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.