Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wysokość div'a względem innych
Norfik
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 20.04.2010

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


Mam drobny problem z rozszerzaniem się "zawartosc" na 100% wysokości i już nie wiem co robie źle.

Szukałem już informacji na wielu stronach jak można to zrobić i prawie jest ok ale :| Strona wprawdzie rozszerza się na wysokość 100% ale do 100% dodawana jest wysokość id "logo" + "stopka" co powoduje, że pasek przewijania jest jakby to napisać cały czas aktywny nawet przy pustej "zawartosc". Proszę o wskazówki co można zrobić by pozbyć się tego efektu. Z góry wielkie dzięki (IMG:style_emoticons/default/smile.gif)

Divy wglądają następująco:
  1. <div id="strona">
  2. <div id="logo">LOGO</div>
  3. <div id="middle">
  4. <div id="menu">
  5. menu
  6. </div>
  7. <div id="zawartosc">
  8. Zawartość wyświetlania
  9. </div>
  10. </div>
  11. <div id="stopka">tekst stopki</div>
  12. </div>


Plik CSS:
  1. html, body {
  2. margin : 0px;
  3. background-color: #2e1b17;
  4. background-image:url('tlo.jpg');
  5. background-repeat:repeat-x;
  6. background-position:left top;
  7. font-family: arial;
  8. text-align: justify;
  9. font-size: 14px;
  10. line-height: 130%;
  11. height:100%;
  12. }
  13.  
  14. #logo {
  15. width : 900px;
  16. height : auto;
  17. position : relative;
  18. float : left;
  19. text-align : center;
  20. margin-left: auto;
  21. margin-right: auto;
  22. background-color:rgba(0, 0, 0, 0.3);
  23. }
  24.  
  25. #menu {
  26. width : 150px;
  27. height : inherit;
  28. position : relative;
  29. float : left;
  30. text-align : center;
  31. padding : 0px 0px 0px 0px;
  32. }
  33.  
  34. #zawartosc {
  35. width : 750px;
  36. height : inherit;
  37. position : relative;
  38. float : left;
  39. text-align : left;
  40. padding : 0px 0px 0px 0px;
  41. margin-left: auto;
  42. margin-right: auto;
  43. }
  44.  
  45. #middle {
  46. width : 900px;
  47. height : inherit;
  48. position : relative;
  49. float : left;
  50. margin-left: auto;
  51. margin-right: auto;
  52. background-image:url('top.jpg');
  53. background-color: #e9e0c3;
  54. background-repeat:repeat-x;
  55. background-position:left top;
  56. }
  57.  
  58. #stopka {
  59. width : 900px;
  60. height : 10px;
  61. position : relative;
  62. float : left;
  63. text-align : center;
  64. font-family: arial;
  65. font-size: 12px;
  66. font-variant: small-caps;
  67. padding : 6px 0px 6px 0px;
  68. text-shadow: #6a5b3e 1px 1px;
  69. color: #4c342a;
  70. margin-left: auto;
  71. margin-right: auto;
  72. background-image:url('bottom.jpg');
  73. background-color: #e9e0c3;
  74. background-repeat:repeat-x;
  75. background-position:left bottom;
  76. }
  77.  
  78. #strona {
  79. width : 900px;
  80. height : 100%;
  81. position : relative;
  82. text-align : center;
  83. padding : 0px 0px 0px 0px;
  84. margin-left: auto;
  85. margin-right: auto;
  86. }



Strona przed próbą rozszerzania wysokości:
(IMG:http://img245.imageshack.us/img245/2617/smdt.png)

Efekt po ustawieniu wysokości div'a "zawartosc" na height: 100%;
(IMG:http://img245.imageshack.us/img245/8613/smdt2.png)

i teraz skoro kontekst diva "zawartosc" nie przekracza rozdzielczości to chce żeby pasek przewijania się nie pojawiał a stopka była widoczna. W momencie gdy zawartość "zawartosc" była większa od rozdzielczości to ma się rozszerzać tylko div "zawartosc" a "stopka" była na końcu diva "zawartosc". Tak jakby to było w table:

  1. <tr><td>LOGO</td></tr>
  2. <tr><td>Zawartosc strony</td></tr>
  3. <tr><td>Stopka</td></tr>


Ten post edytował Norfik 20.04.2010, 22:15:17
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
pedro84
post
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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


OK (IMG:style_emoticons/default/smile.gif) Od razu lepiej.

Przejrzyj, na pewno jest tam coś, czego szukasz (sorry, nie chce mi się szukać teraz:))
Go to the top of the page
+Quote Post
Norfik
post
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 20.04.2010

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


Cytat(pedro84 @ 21.04.2010, 00:12:34 ) *
OK (IMG:style_emoticons/default/smile.gif) Od razu lepiej.

Przejrzyj, na pewno jest tam coś, czego szukasz (sorry, nie chce mi się szukać teraz:))


Miałeś racje to rozwiązuje mój problem dziękuje bardzo za podpowiedz.

Divy:
  1. <div id="strona">
  2. <div id="logo">LOGO</div>
  3. <div id="middle">
  4. <div id="menu">
  5. MENU
  6. </div>
  7. <div id="zawartosc">
  8. ZAWARTOSC
  9. </div>
  10. </div>
  11. </div>
  12. <div id="stopa">
  13. <div id="stopka">STOPKA</div>
  14. </div>


  1. html, body {
  2. margin : 0px;
  3. height:100%;
  4. }
  5.  
  6. body > #strona {
  7. height: auto;
  8. min-height: 100%;
  9. width : 900px;
  10. }
  11.  
  12. /*Opera Fix*/
  13. body:before {
  14. content:"";
  15. height:100%;
  16. float:left;
  17. width:0;
  18. margin-top:-32767px;/
  19. }
  20.  
  21. #strona {
  22. width : 900px;
  23. height: 100%;
  24. overflow: auto;
  25. position : relative;
  26. background-color: #e9e0c3;
  27. }
  28.  
  29. #stopa {
  30. width : 900px;
  31. position : relative;
  32. padding : 0px 0px 0px 0px;
  33. margin-left: auto;
  34. margin-right: auto;
  35. }
  36.  
  37. #stopka {
  38. width : 900px;
  39. height : 12px;
  40. margin-top: -24px;
  41. position : relative;
  42. float : left;
  43. padding : 6px 0px 6px 0px;
  44. clear: both;
  45. margin-left: auto;
  46. margin-right: auto;
  47. }
  48.  
  49. #zawartosc {
  50. width : 750px;
  51. position : relative;
  52. float : left;
  53. text-align : left;
  54. padding : 0px 0px 0px 0px;
  55. margin-left: auto;
  56. margin-right: auto;
  57. overflow:auto;
  58. }
  59.  
  60. #middle {
  61. width : 900px;
  62. overflow: auto;
  63. height-min: 100%;
  64. position : relative;
  65. float : left;
  66. margin-left: auto;
  67. margin-right: auto;
  68. padding-bottom: 12px;
  69. }
  70.  
  71. #menu {
  72. width : 150px;
  73. height : inherit;
  74. position : relative;
  75. float : left;
  76. text-align : center;
  77. padding : 0px 0px 0px 0px;
  78. }
  79.  
  80. #logo {
  81. width : 900px;
  82. height : auto;
  83. position : relative;
  84. float : left;
  85. margin-left: auto;
  86. margin-right: auto;
  87. }


Ten post edytował Norfik 21.04.2010, 11:05:39
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 15.10.2025 - 13:44