Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Automatyczna wysokość diva
profusik
post
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 6.07.2005

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


Mam taki przykładowy kod:
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  2. <head>
  3. <style media="screen" type="text/css">
  4.  
  5. html { height: 100%; }
  6. body { margin: 0;
  7. background: #84C225;
  8. text-align: center;
  9. height: 100%;
  10. }
  11. #divglowny { position: relative;
  12. z-index: 0;
  13. margin: auto;
  14. border: 0px solid black;
  15. width: 1000px;
  16. height: 100%;
  17. }
  18. #divgora1 {
  19. margin: 0px;
  20. height: 100px;
  21. width: 999px;
  22. border: 0px solid pink;
  23. background:yellow;
  24. }
  25. #divgora2 {
  26. margin: 0px;
  27. height: 149px;
  28. width: 999px;
  29. border: 0px solid blue;
  30. background:red;
  31. }
  32. #divsrodek {
  33. height: 100%;
  34. width: 999px;
  35. border: 0px solid green;
  36. background:green;
  37. margin: 0px;
  38. }
  39. #divstopka {
  40. height: 20px;
  41. width: 999px;
  42. border: 0px solid green;
  43. background:blue;
  44. margin: 0px;
  45. }
  46. #menu-lewe {
  47. border: 3px solid white;
  48. position: absolute;
  49. z-index: 1;
  50. width: 210px;
  51. left: 10px;
  52. top: 125px;
  53. color: white;
  54. height: 400px;
  55. }
  56. #menu-gorne {
  57. border: 3px solid white;
  58. position: absolute;
  59. z-index: 2;
  60. height: 25px;
  61. width: 580px;
  62. left: 300px;
  63. top: 85px;
  64. }
  65. #tresc {
  66. border: 3px solid black;
  67. position: absolute;
  68. z-index: 3;
  69. height: 100%;
  70. width: 580px;
  71. left: 300px;
  72. top: 125px;
  73. }
  74. </head>
  75.  
  76. <div id="divglowny">
  77.  
  78. <DIV id="divgora1" >tlo1</DIV>
  79. <DIV id="divgora2" >tlo2</DIV>
  80. <DIV id="divsrodek" >tlo3
  81. <div id="menu-lewe"></div>
  82. <div id="menu-gorne"></div>
  83. <div id="tresc"></div>
  84. </DIV>
  85. <DIV id="divstopka" >stopka</DIV>
  86.  
  87. </div>
  88. </BODY>
  89. </HTML>

Jak zrobić by kontener "divsrodek" miał wysokość całej stony minus "divgora", "divgora2" i "stopka". A oczywiście stopka była zawsze pod "divsrodek".
"divtresc" ma regulować jak wysoki będzie divsrodek" ale gdy "divtresc" jest maly to div srodek ma być na całą stronę.

Teraz jest tak, że jak podaje "divsrodek" wysokość 100% to jest on duży jak cały ekran + "divgora", "divgora2" i "stopka" - czyli wychodzi poza "divglowny" i nawet jak będzie mało treści to stopki nie widać - trzeba przewijać stronę.

Proszę o pomoc i pozdrawiam.
Go to the top of the page
+Quote Post
korex
post
Post #2





Grupa: Zarejestrowani
Postów: 36
Pomógł: 4
Dołączył: 2.02.2008

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


sprobuj wstawic za stopka ogranicznik
  1. <div class="ogranicznik"> </div>

a do css dopisz
  1. .ogranicznik {
  2. clear: both;
  3. }
Go to the top of the page
+Quote Post
mortus
post
Post #3





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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


Może sticky footer okaże się właściwym rozwiązaniem.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 19.08.2025 - 15:44