Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z wysokoscia div-a
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Kinool
moze najpierw rysunek aarambo.gif


mam sobie lay, top stopka i 3 kolumny, kolumna 1 to glowna kolumna z trescia, w kolumna 2 jest menu a kolumna 3 ma tylko w tle gifa (element ozdobny)

i teraz robisie taki manewr ze powstaja schody, tzn divy "dochodz" tylko tam gdzie jest jaks tresc, lub jak sztuznie podam im wysokosc, chodzi mi o to aby ich wysokosci byly takie same. Jesli w kolumnie 1 jest 100 linijek textu to zeby pozostale kolumny tez mialy takoa dlugosc jak ta z trescia a nie konczyly sie tam gdzie konczy sie ich zawartosc

probowalem z height: 100% ale nic to nie dalo sad.gif

jako potrzeba to dam kod i CSS-a OK

------------------------------
Szukajac rozwiazania natrafilem na cos takiego:
Kod
<script type="text/javascript">
function setWys() {
  document.getElementById('kolumna2').style.height = document.getElementById('kolumna1').offsetHeight +'px';
  document.getElementById('kolumna3').style.height = document.getElementById('kolumna1').offsetHeight +'px';
}
</script>


w <body> trzeba jeszcze dac onload="setWys()" no i wstepnie dziala ale onload jest chyba niezgodny z XHTML?!?! jesli sie myle to prosze mnie poprawic a jesli nie to jak to rozwiazac wtedy? smile.gif
revyag
Daj jako tło kontenera zwierającego te 3 divy obrazek o wysokości 1px i szerokości tych 3 divów.
Problem poruszany już parę razy na forum.
Opisany dokładnie tu
mike
Cytat(revyag @ 2005-08-11 09:05:38)
Daj jako tło kontenera zwierającego te 3 divy obrazek o wysokości 1px i szerokości tych 3 divów.

To nie jest rozwiązanie, to obejście problemu. I to na dodatek mało eleganckie.

Dla mnie podstawowe pytanie brzmi:
Jak sprawić żeby div zajmował (na wysokość) całą dostępną powierzchnię?
Przede wszystkim kiedy rodzic nie ma zadeklerowanej tej wielkości i jest ona zmienna.
Jak sprawić żeby się domyślnie rozszerzał?

Chętnie poznam odpowiedź.


Cytat(revyag @ 2005-08-11 09:05:38)
Problem poruszany już parę razy na forum.

Poruszany owszem. Ostateczne rozwiązanie dotychczas nie padło.

Sam szukałem rozwiązania i pytałęm na forum: tutaj ale nikt mi nie odpowiedział na ten problem.
revyag
Może ten topic coś wniesie do tematu:
http://forum.php.pl/index.php?showtopic=33460&hl=
mike
Cytat(revyag @ 2005-08-11 11:48:42)
Może ten topic coś wniesie do tematu:
http://forum.php.pl/index.php?showtopic=33460&hl=

No właśnie tam występuje ten sam problem.
Jak ustawić div'owi o id content żeby rozszerzał się domyślnie w dół.
popo
nie wiem czy to komus pomoze ale u mnie dziala calkiem niezle w mozillach takie oto ustawienie (najdluzsza kolumna wyznacza dlugosc strony dla kontenera zawierajacego w moim przypadku 3 kolumny)
kontener nadrzedny jako jedna z wlasciwosci ma ustawione:
Cytat
display: table;

co spowodowalo w firefoxie ladne wyrownanie kolumn na wysokosc (tlo brane z kolumn a nie z kontenera nadrzednego)

kontener glowny-nadrzedny div, a w nim 3 div'y o stalej szerokosci ustawione na float left

wszystko pozycjonowane wzglednie i jak zwieksza sie ilosc tresci to rozszerzaja sie w pionie smile.gif

sorki za ciutke metny opis mam nadzieje ze teraz jest bardziej zrozumialy (sen pomaga sleepysmiley03.gif )
delu
Ja bym nie był taki pewien, że używanie jednopikselowego obrazka o szerokości trzech div'ów jako tła jest jakimś nieeleganckim obejściem problemu...
Uważam, że używanie
Kod
display: table
lub innych tego typu sposobów jest bardziej nieeleganckim obchodzeniem problemu niż wykorzystanie szerokiego tła...

Na potwierdzenie przytoczę parę przykładów osób-autorytetów w dziedzinie tworzenia stron internetowych, którzy używają właśnie tej techniki na swoich stronach:Można by tu jeszcze wymieniać dużo, bo prawdę mówiąc większość z tej "elity" web designerów używa właśnie tej techniki. smile.gif

Pozdrawiam!
Bociek
ja bym rozwiazal to tak:

przyklad

zajrzyj w zrodlo
delu
Właśnie chodzi o to, że wysokość poszczególnych kolumn nie jest znana. Ty wpisałeś od razu, że wysokość wynosi 500px, a tego nie wiemy w większości przypadków:
Kod
div#calosc {
height: 500px;
}
Bociek
to:

Kod
div#calosc {
height: 500px fixed;
}


pisze w "ciemno" bo niesprawdzalem
popo
@ delu

to z szerokim tlem to jest dobre tylko jak masz na sztywno szerokosc kolumn zafixowana.
jesli masz laya typu fluid, czyli szerokosci kolumn sa procentowo do wielkosci okna to kicha, ale w przypadku statycznych i na sztywno zdefiniowanych kolumn metoda z tlem moze byc

(osobiscie unikam projektowania stron ktore maja szerokosci kolum zafixowane na stala ilosc pixeli - wole zeby na 640x480 i 1024x768 strona wygladala podobnie, tylko tekst w kolumnach inaczej sie ulozy)
revyag
Cytat
wole zeby na 640x480 i 1024x768 strona wygladala podobnie

Chyba przesadzasz. 640x480 ? Wątpię żeby ktoś oglądał strony w takiej rozdzielczości, chyba tylko jacyś masochiści snitch.gif
popo
niestety sa tacy (statystyki wskazuja ze okolo 10% ludkow na jednym z serwisow ktore wykonalem wlazi nan wlasnie w takiej rozdzialce)
edit
niestety do tej mniejszosci zalicza sie szef firmy dla ktorej to robilem ==;
mike
Ranking.pl -> Rozdzielczośći -> Wszyscy użytkownicy mówi nam, że 640 x 480 używa tylko 0,3% użytkowników sieci.

Może zrobiłeś portal dla jakiejś niszowej społeczności. Ale nie powinieneś się tym sugerować.
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.