A blokk húzása a szülőelem üres téren (div expand), nép

Ma kellemetlen problémát tapasztaltam - blokk elrendezéssel a blokkot a függőleges (üres) függőleges üres térre kell kiterjeszteni. Természetesen vízszintesen nincs nehézség - csak állítsa be a kijelzőblokkot (kijelző: blokk), és lesz boldogság =).

De itt van még egy. Van egy szülő div, három div van benne (három oszlop - középső tartalom, jobb és bal oldali panelek). Kiderül, hogy a tartalomhoz tartozó oszlop korlátlan méretű lehet, és be kell állítania az oldalszegmensek méretét (pl. A színváltozás kijavításához). Azt gondoltam, magasság: 100% és boldogság. Kiderült, hogy minden egy kicsit bonyolultabb - ilyen százalékos magassági mutatóval, a diva nagysága egyszerűen az ablak látható mérete lesz az összes következményével.

A különböző böngészők nem támogatják a szükséges tulajdonságot (amely lehetővé teszi a feladat megoldását). Ezért külön kell előírni mindenki számára. Az ötlet egyszerű: a szülői divhoz meg kell adnia a kijelzőt. amely lehetővé teszi a belső elemek (-moz-box. -webkit-box. -ms-flexbox - a böngészőtől függően) kiterjesztését, de a blokk belsejében, amelyet meg kell feszíteni, hogy megadja a -moz-flex-box értékeket. -webkit-flex-box. ms-flex. és így tovább. (a böngészőtől függően is).

A szülő szabad helyét az -moz-flex-box értékek összegével osztják el. -webkit-flex-box vagy ms-flex minden azonnali leszármazottainak, és ezek aránya az értékükhöz viszonyítva.

Feladatunkat egyszerűsíti az a tény, hogy függőlegesen div'ov egyenként.

Íme, mi történt: