Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Automatyczna wysokość diva
Forum PHP.pl > Forum > Przedszkole
profusik
27.06.2011, 13:55:07
Mam taki przykładowy kod:
[HTML] pobierz, plaintext 
  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. </style>
  75. </head>
  76.  
  77. <body>
  78. <div id="divglowny">
  79.  
  80.         <DIV id="divgora1" >tlo1</DIV>
  81.         <DIV id="divgora2" >tlo2</DIV>
  82.         <DIV id="divsrodek" >tlo3
  83.                 <div id="menu-lewe"></div>
  84.                 <div id="menu-gorne"></div>
  85.                 <div id="tresc"></div>
  86.         </DIV>
  87.         <DIV id="divstopka" >stopka</DIV>
  88.  
  89. </div>
  90. </BODY>
  91. </HTML>
[HTML] pobierz, plaintext

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.
korex
27.06.2011, 13:57:22
sprobuj wstawic za stopka ogranicznik
[HTML] pobierz, plaintext 
  1. <div class="ogranicznik"> </div>
[HTML] pobierz, plaintext

a do css dopisz
[HTML] pobierz, plaintext 
  1. .ogranicznik {
  2. 	clear: both;
  3. }
[HTML] pobierz, plaintext
mortus
27.06.2011, 14:15:57
Może sticky footer okaże się właściwym rozwiązaniem.
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.