Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Stopka na dole strony, Zawsze na samym dole
Macok
post
Post #1





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

Ostrzeżenie: (0%)
-----

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 
  1. position: absolute;
  2. 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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Shili
post
Post #2





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----

Nie, nie trzeba
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  5.  
  6. <style>
  7.     * {margin: 0; padding: 0;}
  8.     html {height: 100%;}
  9.     body {position: relative; text-align: center; min-height: 100%; height: auto !important; height: 100%;}
  10.     #main {width: 500px; margin: 0 auto; padding-bottom: 30px; text-align: left;}
  11.     #content {border: solid 1px black; padding: 10px;}
  12.     #footer {border: solid 1px red; width: 500px; position: absolute; bottom: 0; left: 50%; margin-left: -250px;}
  13. </style>
  14. </head>
  15. <body>
  16.     <div id="main">
  17.         <div id="content">
  18.             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/>
  19.         </div>
  20.     </div>
  21.     <div id="footer">
  22.         A tutaj stopka.
  23.     </div>
  24. </body>
  25. </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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował Shili 13.09.2008, 21:59:00
Go to the top of the page
+Quote Post

Posty w temacie
- Macok   [HTML][CSS] Stopka na dole strony   13.09.2008, 11:18:23
- - kazag   ja robiąc stopkę umieszczam ją divie zawierającym ...   13.09.2008, 12:05:12
- - Macok   No wiem że wtedy jest pod treścią, ale chodzi mi o...   13.09.2008, 12:25:58
- - Szunaj85   Spróbuj na div-ach. Najprościej jeśli di...   13.09.2008, 13:32:15
- - Macok   Czyli mam ustawić "position: relative" d...   13.09.2008, 20:44:27
- - Shili   Nie, nie trzeba [HTML] pobierz, plaintext <!DOC...   13.09.2008, 21:55:36
- - -Macok-   Próbowałem tym sposobem, ale zobacz co się stanie ...   14.09.2008, 16:00:22
- - Shili   Naprawdę próbowałeś? Poklikaj sobie na przykładzie...   14.09.2008, 16:34:13
- - Macok   No dobra dzięki, spróbuje. Zadam jeszcze 1 pytanie...   14.09.2008, 21:05:21
- - Shili   CytatJeżeli ustawie w treści height: 70%; w stopce...   14.09.2008, 21:09:11
- - Macok   No dobra dzięki koniec tematu. Oczywiście punkcik ...   14.09.2008, 21:16:41
- - rybik   Kilka uwag które moga sie przydac przy okazji: - ...   14.09.2008, 21:50:40
- - Macok   Chce dopasować wysokość strony do wysokości ekranu...   15.09.2008, 20:01:24
- - Shili   Podaj cały kod - zobaczy się. Bo działać powinno   15.09.2008, 20:28:28

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 4.04.2026 - 10:10
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn