Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Problem ze stopką aby była zawsze na dole strony
Forum PHP.pl > Forum > Przedszkole
Bartek2000
15.04.2015, 20:22:56
Witam,
Mam taki kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3.    <div id="menu">
  4.    </div>
  5.    <div id="cont">
  6.    </div>
  7.    <div id="footer">
  8.         <p>treść stopki</p>
  9.    </div>
  10. </body>
  11. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. html {
  2.     height:100%
  3. }
  4. body {
  5.   padding: 0%;
  6.   margin: 0 auto;
  7. }
  8.  
  9. #menu {
  10.   position: fixed;
  11.   background: /*#2980b9*/ black; 
  12.   width: 100%;
  13.   top: 0px;
  14.   height: 90px;
  15. }
  16.  
  17. #cont {
  18.   margin-top: 0%;
  19. }
  20.  
  21. #footer{
  22.     margin: 0 auto;
  23.     position:absolute;
  24.     left: 0;
  25.     width: 100%;  
  26.     height: 7%;
  27.     background-color: black;  
  28. }
  29.  
  30. #footer p{
  31.    font-size: 15px;
  32.    color: white;
  33.    text-align: center; 
  34. }
[HTML] pobierz, plaintext


Kod ten powoduje, że stopka wędruje po ekranie w poziomie dry.gif Raz jest na samym dole, innym razem w 2/3 ekranu w zależności od ilości treści i rozdzielczości sadsmiley02.gif
Czy jest jakiś złoty środek na to, aby stopka trzymała się zawsze dołu strony bez względu na ilość treści?
Kshyhoo
15.04.2015, 20:30:19
fixed
Bartek2000
15.04.2015, 20:49:27
ok udało się ... jest cały czas na dole.
A co jeśli chciałbym aby stopka była na samym końcu strony a nie cały czas u dołu ekranu?
miras
15.04.2015, 20:55:13
clear: both; ?
Kshyhoo
15.04.2015, 20:56:32
A:
[CSS] pobierz, plaintext 
  1. position: relative;
  2. bottom: 0;
[CSS] pobierz, plaintext
Bartek2000
16.04.2015, 19:12:02
Właśnie takie ustawienie:

[HTML] pobierz, plaintext 
  1. #footer{
  2.     bottom: 0;
  3.   position:fixed;
  4.     /*vertical-align: baseline;*/
  5.     left: 0;
  6.     width: 100%;  
  7.     height: 7%;
  8.     background-color: black;  
  9. }
[HTML] pobierz, plaintext


daje efekt stopki zawsze u dołu ekranu, a nie mogę uzyskać efektu, aby była ona zawsze na samym dole strony

Edit:

Chyba to rozwiązuje problem ...

[PHP] pobierz, plaintext 
  1. #footer{
  2.     clear: both; 
  3.     bottom: 0;
  4.  /* position:fixed;*/
  5.     /*vertical-align: baseline;*/
  6.     left: 0;
  7.     width: 100%;  
  8.     height: 7%;
  9.     background-color: black;  
  10. }
[PHP] pobierz, plaintext


EDIT
Koledzy to jednak nie działa.
Stopka nie trzyma się dołu strony closedeyes.gif
Moglibyście mi podpowiedzieć jak uzyskac taki efekt? aby bez względu na wysokość kontentu (ustawiam go zawsze na height: auto;) stopka była na dole ekranu, bez opcji position: fixed;?
bottom 0; powoduje że trzyma się pod kontentem.
Kshyhoo
16.04.2015, 19:17:50
Musi działać:
[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div id="wrapper">
  3. 		<div id="header"></div>
  4. 		<div id="content"></div>
  5. 		<div id="footer"></div>
  6. 	</div>
  7. </body>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. html,
  2. body {
  3. 	margin:0;
  4. 	padding:0;
  5. 	height:100%;
  6. }
  7. #wrapper {
  8. 	min-height:100%;
  9. 	position:relative;
  10. }
  11. #header {
  12. 	background:#ededed;
  13. 	padding:10px;
  14. }
  15. #content {
  16. 	padding-bottom:100px; /* Height of the footer element */
  17. }
  18. #footer {
  19. 	background:#ffab62;
  20. 	width:100%;
  21. 	height:100px;
  22. 	position:absolute;
  23. 	bottom:0;
  24. 	left:0;
  25. }
[CSS] pobierz, plaintext
Bartek2000
18.04.2015, 14:03:39
Cytat(Kshyhoo @ 16.04.2015, 20:17:50 ) *
[CSS] pobierz, plaintext 
  1. html,
  2. #content {
  3. 	padding-bottom:100px; /* Height of the footer element */
  4. }
  5. #footer {
  6. 	background:#ffab62;
  7. 	width:100%;
  8. 	height:100px;
  9. 	position:absolute;
  10. 	bottom:0;
  11. 	left:0;
  12. }
[CSS] pobierz, plaintext


W związku z coraz mniejszą rozdzielczością, chcę zmniejszyć wysokość stopki ze 100 na 50px, więc zrobiłem tak:
[CSS] pobierz, plaintext 
  1. html,
  2. #content {
  3. 	padding-bottom:50px; /* Height of the footer element */
  4. }
  5. #footer {
  6. 	background:#ffab62;
  7. 	width:100%;
  8. 	height:50px;
  9. 	position:absolute;
  10. 	bottom:0;
  11. 	left:0;
  12. }
[CSS] pobierz, plaintext


Efekt?
stopka zmniejszyła wysokość o 50 px, ale odstaje od dołu strony 50px.
Co tu jest nie tak?
Kshyhoo
18.04.2015, 14:09:40
Przecież jak wół stoi: /* Height of the footer element */.
Bartek2000
18.04.2015, 14:47:11
No to przecież wpisałem tam 50px i w stopce też dałem 50px!
Kshyhoo
18.04.2015, 14:54:03
Coś zchrzaniłeś, bo to działający kod.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.