Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]DIV zawsze na dole ekranu
Forum PHP.pl > Forum > Przedszkole
harbii
8.06.2015, 20:19:00
Mam w stylach coś takiego:
[HTML] pobierz, plaintext 
  1. #stopka{
  2. position:fixed;
  3. background-color: #000000;
  4. bottom: 0px;
  5. width:100%;
  6. clear:both;
  7. padding: 0px 0px 0px 0px;
  8. margin: 0px 0px 0px 0px;
  9. }
[HTML] pobierz, plaintext

Dzięki temu mam idealnie na dole okna przeglądarki tego DIVa. Ale jak pomnieszę okno przeglądarki i DIV stopka nie mieści się na ekranie. Pojawia się scroll do przesówania poziomego. Cała strona się przesówa al DIV stopka stoi w miejscu.

absolute - zostawia DIV tam gdzie był na ekranie podczas ładowania strony,
relative - trzyma po prostu DIVa na dole strony ale nie okna przeglądarki tak jak fixed.

Jak zrobić aby fixed reagował na przesówanie strony w poziomie? Lub może jest jakiś inny sposób na to aby DIV był zawsze u dołu okna przeglądarki?
Pyton_000
8.06.2015, 20:22:09
Że tak?
https://css-tricks.com/snippets/css/sticky-footer/
harbii
8.06.2015, 21:08:50
Nie. ten sposób przykleja stopkę do dołu strony czyli akurat w moim przpadku załtwia coś takiego relative. Ale nie o to mi chodzi.

Stopka ma byc przyklejona do dołu okna przeglądarki tak jak to robi fixed, ale ma sie dać przesuwać w poziomie.
fate
9.06.2015, 08:48:49
position fixed
overflow:hidden
harbii
9.06.2015, 11:34:01
fate - overflow hidden ukryje scroll'a a mi nie o to chodzi.

Zadam pytanie inaczej.

Mamy coś takiego:
[HTML] pobierz, plaintext 
  1. <style>
  2. #content {
  3. width:500px;	
  4. }
  5. #footer {
  6. position: fixed;
  7. bottom:0px;
  8. background-color:#039;
  9. width:10000px;
  10. }
  11. </style>
  12. <html>
  13. <body>
  14. 		<div id="content">
  15. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  16. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  17. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  18. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  19. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  20. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  21. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  22. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  23. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  24. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  25. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  26. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  27. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  28. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  29. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  30. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  31. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  32. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  33. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  34. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  35. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  36. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  37. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  38. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  39. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  40. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  41. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  42. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  43. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  44. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  45. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  46. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  47. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  48. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  49. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  50. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  51. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  52. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  53. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  54. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  55. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  56. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  57. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  58. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  59. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  60. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  61. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  62. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  63. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  64. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  65. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  66. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  67. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  68. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  69. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  70. 		sss	safsdf sdfds fds fds fds fdsfsdfds f<br>
  71.  
  72.         </div>
  73.  
  74.  
  75. <div id="footer">
  76. dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    ddddddddddddddddddd <p align="right">Tego nie widać.</p>
  77. </div>	
  78. </div>
  79. </body></html>
[HTML] pobierz, plaintext




Jak zrobić aby footer był zawsze na dole okna przeglądarki ale jednocześnie reagował na poziomego scrolla?
W powyższym przykładzie nie da sie zobaczyć <p> w footerze.

Jakiś pomysł?
trueblue
9.06.2015, 11:51:04
http://jsfiddle.net/ho177mna/
harbii
9.06.2015, 17:43:17
trueblue specool.gif
Dzięki!
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.