Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] wysokość kolumny - diva na 100% (w odniesieniu do wysokości strony)
Forum PHP.pl > Forum > Przedszkole
czychacz
24.06.2010, 11:32:04
mam problem z dwoma divami - menu lewostronnym i panelem użytkownika. w tej chwili wygląda to tak:

chciałbym, aby lewy i prawy div był rozciągnięty w pionie na wysokość diva środkowego - zawartości strony.
próbowałem: height:100%; i bottom:0; ale nic nie dało.
Lars_18
24.06.2010, 11:36:46
A w html i body też masz height: 100%? Możesz to zrobić za pomocą display: table-cell; i display: table-row;
czychacz
24.06.2010, 11:39:39
nie, wysokość body zależy od wysokości diva - kontenera, a wysokość tego kontenera zależy od wysokości nagłówka z tytułem strony i wysokości poniższej zawartości
cros
24.06.2010, 11:45:45
Cytat(Lars_18 @ 24.06.2010, 12:36:46 ) *
A w html i body też masz height: 100%? Możesz to zrobić za pomocą display: table-cell; i display: table-row;

Tak tylko ze table-row, table-cell nie obsluguje IE7.
Jesli cos to albo js, albo <table>.
Do tego jednak najlepsze sa tabele, co by sie o nich nie mowilo, ale w niektorych wypadkach sa poprostu niezastapione i kropka, chyba ze lubisz zasypywac strone dziesiatkami skryptow, do efektu, ktorym mozna latwo i szybko osiagnac tabelka.
czychacz
24.06.2010, 11:50:38
tabele odpadają. potrzebuję zrobić stronę opartą o divy. łatwiej jest wtedy dostosować cssa do niej.
cros
24.06.2010, 11:53:43
Cytat(czychacz @ 24.06.2010, 12:50:38 ) *
tabele odpadają. potrzebuję zrobić stronę opartą o divy. łatwiej jest wtedy dostosować cssa do niej.

No jak uwazasz, to pozostaje ci oskryptowanie (tylko ze ktos moze miec wyl. js - rzadkosc ale zawsze ryzyko jest), albo display: table, ale jak juz pisalem ie7 i nizej tego nie obsluguja.

PS. Nie twierdzilem, ze masz caly szablon opierac na tabelkach, bo to jest zle, ale pewne elementy mozna zrobic na tabelce.

Wbrew pozorom ie7 (i nizsze) jeszcze zyje i spora libcza uzytkownikow internetu z niej korzysta, wiec osobiscie majac do wyboru rezygnacje z ie7 i zastosowanie table-row, a zrobienie strony hybrydy div + tabele i zachowanie kompatybilnosci z ie, wybieram to drugie.
Przeciez mozesz zrobic komentarze warunkowe i jesli ie <= 7 wtedy dopiero stosujesz tabele, a jak nie to display:table....
czychacz
24.06.2010, 12:04:59
zmiana display na table-row lub table-cell nic nie pomaga... jakieś inne pomysły bez użycia tabel??
Kuzry
24.06.2010, 12:05:33
Pokaż kod... :]
sunpietro
24.06.2010, 12:13:03
tu masz rozwiązanie: równa wysokość kolumn CSS
wybierz to, które Ci bardziej pasuje
cros
24.06.2010, 12:15:19
Cytat(cros @ 24.06.2010, 12:53:43 ) *
No jak uwazasz, to pozostaje ci oskryptowanie (tylko ze ktos moze miec wyl. js - rzadkosc ale zawsze ryzyko jest), albo display: table, ale jak juz pisalem ie7 i nizej tego nie obsluguja.

PS. Nie twierdzilem, ze masz caly szablon opierac na tabelkach, bo to jest zle, ale pewne elementy mozna zrobic na tabelce.

Wbrew pozorom ie7 (i nizsze) jeszcze zyje i spora libcza uzytkownikow internetu z niej korzysta, wiec osobiscie majac do wyboru rezygnacje z ie7 i zastosowanie table-row, a zrobienie strony hybrydy div + tabele i zachowanie kompatybilnosci z ie, wybieram to drugie.
Przeciez mozesz zrobic komentarze warunkowe i jesli ie <= 7 wtedy dopiero stosujesz tabele, a jak nie to display:table....

No przeciez pisalem JS - nic wiecej nie wymyslisz.

Poza tym poczytaj jak sie buduje pseudo tabele na divach.
Podobnie zreszta jak na <table>
Czyli:
[HTML] pobierz, plaintext 
  1. <div class="table">
  2.  <div class="tr">
  3.   <div class="td"></div>
  4.   <div class="td"></div>
  5.  </div>
  6. </div>
[HTML] pobierz, plaintext

i css
[CSS] pobierz, plaintext 
  1. .table { display: table; }
  2. .tr { display: table-row; }
  3. .td { display: table-cell; }
[CSS] pobierz, plaintext


PS. Jak ktos ci cos radzi to nie sluchasz, a zeby samemu cos pomyslec to nic.
Poczytaj pierw jakies kursy css.
czychacz
24.06.2010, 12:17:07
kod w htmlu:
[HTML] pobierz, plaintext 
  1. <div id="page">
  2.     <div id="header">Nagłówek strony</div>
  3.     <div id="categories">
  4.       <span class="catheader">Nagłówek kategorii</span><br>
  5.       <ul>
  6.         <li><a href=".">Link 1</a></li>
  7.       </ul>
  8.     </div>
  9.     <div id="info">
  10.       <span class="catheader">Info panel</span><br>
  11.       Info panel
  12.       <form action="." method="post">
  13.         <p>Login:<br>
  14.         <input type="text" name="username" class="resize"><br>
  15.         Hasło:<br>
  16.         <input type="password" name="password" class="resize"><br>
  17.         <input type="submit" value="Zaloguj"></p>
  18.       </form>
  19.     </div>
  20.     <div id="middle">
  21.       <div id="content">
  22.         a<br>
  23.         a<br>
  24.         a<br>
  25.         a<br>
  26.         a<br>
  27.         a<br>
  28.         a<br>
  29.         a<br>
  30.         a<br>
  31.         a<br>
  32.         a<br>
  33.         a<br>
  34.         a<br>
  35.         a<br>
  36.         a<br>
  37.         a<br>
  38.       </div>
  39.       <div id="footer">Stopka strony</div>
  40.     </div>
  41.   </div>
[HTML] pobierz, plaintext

kod css:
Kod
body{margin:0;background-color:rgb(223,223,231);font-size:12px;font-family:sans-serif;}
p{margin:0;padding:0;}
#page{width:960px;margin:0 auto;padding:0;}
#header{width:952px;background-color:rgb(63,63,95);color:rgb(223,223,231);text-align:center;text-transform:uppercase;font-size:300%;font-weight:bold;}
#categories{width:190px;background-color:rgb(63,63,95);color:rgb(223,223,231);float:left;overflow:hidden;clear:left;}
#info{width:160px;background-color:rgb(63,63,95);color:rgb(223,223,231);float:right;overflow:hidden;clear:right;}
#middle{width:594px;padding:0;background-color:rgb(231,231,239);color:rgb(63,63,95);float:left;overflow:hidden;clear:none;}
#footer{color:rgb(127,127,139);border-top:1px dashed rgb(191,191,199);clear:both;text-align:center;font-size:10px;}
div{padding:4px;}
#categories ul{margin:0;padding:0;width:182px;list-style-type:none;}
#categories li a{text-decoration:underline;color:rgb(215,215,223);display:block;width:182px;}
#categories li a:hover{text-decoration:none;}
input{border:1px solid rgb(63,63,95);color:rgb(63,63,95);background-color:rgb(223,223,231);font-size:90%;margin:1px;}
form{margin:0;}
#info input.resize{width:154px;}



//edit:
sunpietro: strona z linka się wczytuje, ale podstrony już nie:/
cros: jeśli chodzi o Twoje rozwiązanie z pseudotabelami - nie pasuje mi dlatego, że jak dla mojego prostego umysłu to to samo, co tabele, tylko użycie dodatkowo cssa
cros
24.06.2010, 12:29:49
Cytat(czychacz @ 24.06.2010, 13:17:07 ) *
//edit:
sunpietro: strona z linka się wczytuje, ale podstrony już nie:/
cros: jeśli chodzi o Twoje rozwiązanie z pseudotabelami - nie pasuje mi dlatego, że jak dla mojego prostego umysłu to to samo, co tabele, tylko użycie dodatkowo cssa

Przeciez to nie jest moj pomysl, tylko Lars_18, ktory przeciez sprawdzales (czyt. odpowiadal Tobie), ja ci tylko wytlumaczylem, jak prawidlowo sie tego uzywa.
Poza tym to nie jest to samo co tabele, to sa nadal divy, ktore imituja zachowanie tabel.
Jednak jakbym mial sie z tym bawic, to osobiscie wybral bym te 'normalne' tabel (<table>), z jednej prostej przyczyny - sa obsugiwane przez (chyba) wszystkie przegladarki, a te pseudo niestety nie....mowa tu o twoim przypadku.

PS. Cos mi sie wydaje, ze kolega poprostu naczytal sie zlych rzeczy o tabelach i teraz na sile proboje tego unikac.
W3C nie zabrania korzystania z tabel!!! Tylko trzeba to robic z rozsadkiem, a nie budowac caly layout na nich, a w twoim przypadku akurat uzycie tej jednej tabeli, nie zalicza sie do tego.
Lars_18
24.06.2010, 12:30:15
To nie jest to samo, tabelki są do danych tabelarycznych, a divów można użyć do "układania" elementów na stronie, więc jest bardziej semantyczne.
Inaczej tego nie osiągniesz, bo tylko tabelki zachowują się w sposób jaki chcesz osiągnąć. No chyba że użyjesz JavaScript.
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.