Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]DIV zawsze na dole ekranu
harbii
post
Post #1





Grupa: Zarejestrowani
Postów: 311
Pomógł: 1
Dołączył: 27.05.2006

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

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?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
Pyton_000
post
Post #2





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

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

Że tak?
https://css-tricks.com/snippets/css/sticky-footer/
Go to the top of the page
+Quote Post
harbii
post
Post #3





Grupa: Zarejestrowani
Postów: 311
Pomógł: 1
Dołączył: 27.05.2006

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

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.

Ten post edytował harbii 9.06.2015, 08:14:09
Go to the top of the page
+Quote Post
fate
post
Post #4





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

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

position fixed
overflow:hidden


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
harbii
post
Post #5





Grupa: Zarejestrowani
Postów: 311
Pomógł: 1
Dołączył: 27.05.2006

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

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ł?

Ten post edytował harbii 9.06.2015, 11:35:04
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

http://jsfiddle.net/ho177mna/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
harbii
post
Post #7





Grupa: Zarejestrowani
Postów: 311
Pomógł: 1
Dołączył: 27.05.2006

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

trueblue specool.gif
Dzięki!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 21.08.2025 - 13:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn