Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] automatyczna wysokość DIVa przy zmianie rozdzielczosci - jak?
Forum PHP.pl > Forum > Przedszkole
InosU31
16.10.2010, 22:48:39
Witam

Mam maly problem z automatycznym rozciaganiem srodkowego diva podczas zmiany rozdzielczosci ekranu. Potrzebuje tego poniewaz chce by odleglosc miedzy logo i srodkowym divem i tak samo stopka i srodkowym divem byla zawsze taka sama a jedynie sam srodek by sie rozciagal pozatym zeby stopka byla dzieki temu zawsze na dole.

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/htm14/loose.dtd">
  4. <html>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
  7.     <head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <title></title>
  10.         <link rel='stylesheet' type='text/css' href='style.css' />
  11.         <!-- compliance patch for microsoft browsers -->
  12.         <!--[if lt IE 7]>
  13.             <link rel='stylesheet' type='text/css' href='multi-column-ie.css' />
  14.             <script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
  15.         <![endif]-->
  16.     </head>
  17.     <body>
  18.  
  19.      <div id='logo'>
  20.            logo-napis-inny
  21.       </div>
  22.  
  23.         <div id='logo-menu'>
  24.            <h4>Logo-menu</h4>
  25.         </div>
  26.  
  27.       <div id='obramowanie-srodek'> 
  28.  
  29.         <div id='srodek'>
  30.             <div id='first-column'>
  31.                 Text in the first column.
  32.             </div>
  33.             <div id='linia-pionowa'>
  34.                 T
  35.             </div>
  36.             <div id='third-column'>
  37.                 Text in the third column.
  38.             </div>
  39.  
  40.         </div>
  41.  
  42.         <div id='linia_pozioma'>
  43.                 Tralala
  44.         </div>
  45.  
  46.           <div id='srodek'> 
  47.  
  48.              <div id='damskie'>
  49.                 damskie
  50.              </div>
  51.  
  52.               <div id='meskie'>
  53.             	 meskie
  54.              </div>
  55.  
  56.               <div id='reklama'>
  57.             	 meskie
  58.              </div>
  59.  
  60.           </div>
  61.  
  62.        </div>   
  63.  
  64.         <div id='stopka'>
  65.             <h4>Footer</h4>
  66.         </div> 
  67.  
  68.     </body>
  69. </html>
  70.  
[HTML] pobierz, plaintext



kod css:

[XML] pobierz, plaintext 
  1.  
  2. html, body {
  3.     background: white;
  4.     font-family: sans-serif;
  5.     margin: 0;
  6.     padding: 0;
  7.     height: 98%;
  8. }
  9. h1, h4 {
  10.     margin: 0;
  11.     font-weight: normal;
  12. }
  13.  
  14.  
  15.  
  16. div#logo {
  17.     position: static;
  18.  
  19.   border: 1px solid gray;
  20.     background: lightgrey;
  21.     min-height: 140px;
  22.     margin: 10px auto 5px auto;
  23.  
  24. }
  25.  
  26. div#logo-menu {
  27.     position: relative;
  28.  
  29.     border: 1px solid gray;
  30.     background: lightgrey;
  31.     min-height: 40px;
  32.     margin: auto auto 10px auto;
  33. }
  34.  
  35. div#obramowanie-srodek {
  36.     position: relative;
  37.     border: 1px solid gray;
  38.     background: green;
  39.     margin: auto;
  40.     padding: 0;
  41.     height: auto;
  42.  
  43. }
  44.  
  45. div#srodek {
  46.     position: relative;
  47.     border: 1px solid gray;
  48.     background: red;
  49.     min-height:160px;
  50.     margin: auto;
  51. }
  52. div#first-column,
  53. div#third-column {	
  54.  
  55.   position: absolute;
  56.     top: 0;
  57.     bottom: 0;
  58.     border: 1px solid gray;
  59.     background: rgb(240, 240, 240);
  60.     min-width: 400px;
  61.     min-height:150px;
  62.     margin: 3px;
  63. }
  64.  
  65. div#first-column {
  66.     left: 0;
  67. }
  68. div#third-column {
  69.     right: 0;
  70. }
  71.  
  72. div#linia-pionowa {
  73. 	position: static;
  74.     margin: 5px auto auto auto;
  75.     background: rgb(240, 240, 240);
  76.     border: 1px solid gray;
  77.     min-width: 5px;
  78.     max-width: 10px;
  79.     min-height: 165px;
  80. }
  81.  
  82. div#linia_pozioma { 
  83.  
  84.     position: static;
  85.     top: 0;
  86.     bottom: 0;
  87.     border: 1px solid gray;
  88.     background: rgb(240, 240, 240);
  89.     max-width: 300px;
  90.     margin: auto;
  91. }
  92.  
  93. div#damskie	{  
  94.  
  95.   	position: relative;
  96.   	top: 0;
  97.     bottom: 0;
  98.     border: 1px solid gray;
  99.     background: rgb(240, 240, 240);
  100.     max-width: 300px;
  101.     min-width: 150px;
  102.     min-height: 150px;
  103.     margin: 3px 0px 3px 100px;   
  104.     float: left; 
  105. }
  106.  
  107.  
  108. div#meskie {  
  109.  
  110.   	position: relative;
  111.   	top: 0;
  112.     bottom: 0;
  113.     border: 1px solid gray;
  114.     background: rgb(240, 240, 240);
  115.     max-width: 300px;
  116.     min-width: 150px;
  117.     min-height: 150px;
  118.     margin: 3px 0px 3px 100px;  
  119.     float: left; 
  120. }
  121.  
  122.  
  123. div#stopka {
  124. 	position: relative;
  125.     background: rgb(240, 240, 240);
  126.     border: 1px solid gray;
  127.     min-height: 30px;
  128.     margin: 10px auto auto auto;
  129. }
  130. div#logo {
  131.     border-bottom: none;
  132. }
  133. div#stopka {
  134.     border-top: none;
  135. }
  136.  
  137.  
  138. div#logo,
  139. div#logo-menu,
  140. div#obramowanie-srodek,
  141. div#srodek, 
  142. div#stopka
  143. 		{		
  144. 	max-width: 840px;
  145.     min-width: 780px;	
  146.  
  147. 		}
[XML] pobierz, plaintext


Gdy dam np. rozdzielczosc 1280x960 to divy sie ladnie zmniejszaja jesli chodzi o logo i wogule szerokosc no ale sie nie rozciagaja na cala dlugosc ekranu:/

Generalnie chodzi mi o to by kontener zielony, czerwony, tralala, meskie, damskie, itd bylu zawsze na srodku by sie rozciagaly po wysokosci ekranu na srodek.

z gory dzieki za pomoc.

pozdrawiam
zimekk
17.10.2010, 00:23:58
http://internetmaker.pl/artykul/4416,2,kolumny_w_css <- tu jest ciekawy artykul na temat kolumn w css
cniak
17.10.2010, 12:56:56
margin: 0px auto;
width:100%;
To może pomoże?
Narysuj to, zbyt duzo tresci masz i tego nie rozumiem do konca. Albo jestem nie kumaty, albo ty nie dokonca wytlumaczyles.
kapuch
17.10.2010, 18:51:24
Cytat(cniak @ 17.10.2010, 13:56:56 ) *
margin: 0px auto;
width:100%;
To może pomoże?
Narysuj to, zbyt duzo tresci masz i tego nie rozumiem do konca. Albo jestem nie kumaty, albo ty nie dokonca wytlumaczyles.

Dla ciebie wysokosc to width?
Poza tym div nie zachowuje sie jak tabela i height:100% malo da.
No chyba ze wyswietlimy diva jako tabele (display: table; ) i wtedy nadamy height:100%;, albo poprostu uzyjemy tabelek do tego celu.
cniak
17.10.2010, 19:25:40
Pomyliłem height z width, heh - mój błąd.
margin: 0px auto działa tylko (o ile sie nie myle) dla diva (elementu blokowego), więc bez display: block; gówno by dało.
kapuch
17.10.2010, 19:42:37
Cytat(cniak @ 17.10.2010, 20:25:40 ) *
Pomyliłem height z width, heh - mój błąd.
margin: 0px auto działa tylko (o ile sie nie myle) dla diva (elementu blokowego), więc bez display: block; gówno by dało.

Tutaj tez sie myslisz, bo margin: 0 auto; dziala rowniez dla display:table;
Nie dziala dla display:table-row i display:table-cell, ale to normalne, bo to oplatasz pierw divem display:table;
Czyli budujesz jak tabele:
[HTML] pobierz, plaintext 
  1.  
  2. <div style="display: table; border:1px solid black; margin:0 auto;"> <!-- <table> -->
  3.  <div style="display: table-row;"> <!-- <tr> -->
  4.   <div style="display: table-cell;border:1px solid black;">a</div> <!-- <td></td> -->
  5.   <div style="display: table-cell;border:1px solid black;">b</div> <!-- <td></td> -->
  6.   <div style="display: table-cell;border:1px solid black;">c</div> <!-- <td></td> -->
  7.  </div> <!-- </tr> -->
  8.   <div style="display: table-row;"> <!-- <tr> -->
  9.   <div style="display: table-cell;border:1px solid black;">a</div> <!-- <td></td> -->
  10.   <div style="display: table-cell;border:1px solid black;">b</div> <!-- <td></td> -->
  11.   <div style="display: table-cell;border:1px solid black;">c</div> <!-- <td></td> -->
  12.  </div> <!-- </tr> -->
  13. </div> <!-- </table> -->
  14.  
[HTML] pobierz, plaintext

I dziala jak nalezy, takze "gowno" narazie tylko z twoich ust wyszlo winksmiley.jpg
Chociaz osobiscie wole zwykle tabele, niz cudowanie z divami imitujacymi table.
Duzo ludzi ma jakas dziwna odraze do <table> i kombinuje na lewo i prawo, a tak naprawde W3C odradza tylko stosowania tabel do tworzenia layoutow.
Czasami trzeba uzyc tej tabelki, bo skoro inaczej sie nie da - a nie da sie automatycznie rozciagac wysokosci diva bez zastosowania jakis debilnych skryptow js, wiec czemu zasmiecac strone, skoro mozna uzyc tabelki?
Ale skoro ktos faktycznie ma wstret do znacznikow <table>, to niech zrobi to na <div> tak jak podalem w przykladzie...eehhh :/
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.