[ppawel]

Mam taką zagadkę http://jsfiddle.net/vrqu3cm5/ a wygląda na to, że zwiedziłem już wszystkie krańce mózgu w zakresie CSS.

Otóż chciałbym, aby wszystko ładnie zmieściło się w niebieskiej ramce (sidebar na 100% wysokości ekranu), tak jakby czerwony div był float do dołu, a powyższy tekst wypełniał całą pozostałą przestrzeń (a że jest go dużo, to w swojej ramce byłby scrollowany).

Czy to jest wykonalne w samym CSS?

Dla zobrazowania dynamicznego rozmiaru dolnego diva dodałem kawałek JS, ale to jQuery nie jest tu istotne (bardziej pozwala na przetestowanie). Marginesy i kolory też tylko dla ilustracji co jest co.

#css #html #webdev

[npsr]

@ppawel: check this: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[epi]

@ppawel: jest :)

[ppawel]

@npsr: dzięki, to chyba jest ten trop :) w jsfiddle działa elegancko (przynajmniej przy wyczyszczeniu baseline i marginów), mogę iść psuć właściwy projekt ;)

[npsr]

@ppawel: tylko pamiętaj, że flexbox ma problemy z kompatybilnością wsteczną :)

Np. firefox 27 niema w ogóle flex-wrap ani żadnego odpowiednika (ostatnio z tym walczyłem).

Dopiero podobno 28 wprowadza (nie sprawdzałem) ... na > 30 chodzi już normalnie.

Chrome spoko, opera obecna na blinku też, nie wiem jak ze starszymi.

IE < 11 nie wspieram, więc nie sprawdzałem :P

AAA i safari zarówno mobilne jak i normalne też może czasem krzaczyć.

[pilkarskiefakty_com]

@ppawel: Sprawdź, czy o to chodziło: http://jsfiddle.net/vrqu3cm5/2/

Jeśli tak, to nie będzie kłopotu z kompatybilnością.

[ppawel]

@pilkarskiefakty_com: dzięki za pomysł, ale niestety nie spełnia wymagania zmieszczenia się w pionie w 100% wysokości rodzica

[Hauleth]

@npsr: http://caniuse.com/#feat=flexbox

[npsr]

@Hauleth: nie ufaj ślepo takim stronom. To, że flexbox jest dostępny np. od firefox 30, nie znaczy, że wcześniej nie było po prostu box lub -moz-box :P

Ja wspieram od ff 27 i flexbox chodzi, chociaż miałem problemy z flex-wrap właśnie :)

[Hauleth]

@npsr: Akurat CanIUse jest aktualizowane dość dobrze (kiedyś było znacznie gorzej). Dodatkowo masz info jeśli musisz użyć przedrostków. Zobacz chociaż na Safari.

[npsr]

@Hauleth: w sumie masz rację, mają nawet dokładnie to info o którym pisałem powyżej :)