Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wyrównanie wysokości kolumn

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Wyrównanie wysokości kolumn

Post 05.01.2015, 22:41:24

Szykuję stronę opartą na takim oto szablonie:

http://rostov.cba.pl/

Jak to zrobić, by div menu (prawa kolumna) był zawsze tej samej wysokości co div, w którym będzie umieszczona treść (lewa kolumna)?
Rostov
Posty: 121
Dołączył(a): 14.08.2003

Re: Wyrównanie wysokości kolumn

Post 05.01.2015, 22:54:24

Dzisiaj można użyć flexboxa albo ewentualnie display: table/table-row/table-cell (żeby DIVy zachowywały się jak tabele). Można też skorzystać z paru innych sztuczek opisanych tutaj (pod tym linkiem masz też opisany sposób z flexboxem i tabelami).
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19570
Dołączył(a): 14.04.2002

Re: Wyrównanie wysokości kolumn

Post 06.01.2015, 00:08:57

A jak to rozwiązać "po staremu", by nawet IE 6/7 nie miały problemu?
Rostov
Posty: 121
Dołączył(a): 14.08.2003

Re: Wyrównanie wysokości kolumn

Post 06.01.2015, 16:33:13

Może spróbuj skorzystać z programu NVU do obróbki stron w html tam sobie wszystko wyrównasz ;-) http://www.programki.pl/files/categorie ... n-www.html
konstanty
Posty: 1
Dołączył(a): 06.01.2015

Re: Wyrównanie wysokości kolumn

Post 06.01.2015, 19:01:03

kuku napisał(a):Dzisiaj można użyć flexboxa albo ewentualnie display: table/table-row/table-cell (żeby DIVy zachowywały się jak tabele). Można też skorzystać z paru innych sztuczek opisanych tutaj (pod tym linkiem masz też opisany sposób z flexboxem i tabelami).


display:table się tu chyba raczej nie sprawdzi. A to choćby z tego względu, że elementy tabel tworzonych w ten sposób nie mają odpowiedników colspan z XHTML. A potrzebne byłyby tu stworzenia nagłówka i stopki, które będą w tym wypadku "komórkami" rozciągającymi się na 2 kolumny. Chyba, że niezbyt rozumiem zastosowanie tej technologii, to proszę mnie poprawić.
Rostov
Posty: 121
Dołączył(a): 14.08.2003

Re: Wyrównanie wysokości kolumn

Post 06.01.2015, 19:08:08

Nie musisz całego layoutu budować na bazie tabelowych displayów, tylko ten fragment dokumentu, który chcesz w dwóch kolumnach (te kolumny dajesz na display: table-cell). Ten sposób może jednak wymagać wstawienia dodatkowego kontenera na kolumny, żeby ustawić mu display: table albo table-row… ale można trochę poeksperymentować…

faktem jest, że dopiero dzięki flexboxowi da się "normalnie" tworzyć większość skomplikowanych layoutów, w szczególności właśnie klasyk - równej wysokości kolumny, wystarczy zignorować stare przeglądarki. Do tej pory trzeba było walczyć technikami wymienionymi pod podanym przeze mnie linkiem (których w większości nie lubiłem) lub jeśli się dało, to korzystało się z techniki zwanej faux columns. Nie wiem dla kogo robisz tę stronę, ale dzisiaj wspieranie IE starszych od 9 jest szczerze powiedziawszy stratą czasu. Lepiej zaoferować starym przeglądarkom jakiś zredukowany interfejs, grunt, że będzie działał.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19570
Dołączył(a): 14.04.2002

Re: Wyrównanie wysokości kolumn

Post 07.01.2015, 20:54:13

Roboczo wygląda to tak: http://rostov.cba.pl/
Ale... co ja robię nie tak, że szerokość kolumn treści i menu (razem z odstępem między nimi) nie pokrywają mi się z szerokością kolumn nagłówka i stopki?
Obstawiam 2 opcje: albo źle użyłem w którymś miejscu "padding" lub "border-spacing", albo źle obliczyłem szerokość wewnętrznych divów "tabeli".
Rostov
Posty: 121
Dołączył(a): 14.08.2003


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 9 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50315 zarejestrowanych użytkowników.
Najnowszy użytkownik: EleanorRobbins


Nasi użytkownicy napisali:

  • 935444 wiadomości
  • w 246477 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)