Astăzi am întâlnit o problemă neplăcută - cu aspectul blocului a fost necesar să întind blocul în spațiul gol al elementului părinte vertical (Div expand). Desigur, pe orizontală nu există nici o dificultate - trebuie doar să setați blocul de afișare (afișaj: bloc) și să fie fericire =).
Dar aici este altul. Există div divizor, există trei divs în ea (trei coloane - conținut de mijloc, dreapta și stânga - panouri). Se pare că coloana cu conținutul poate fi nelimitată în dimensiune și trebuie să ajustați mărimea subdiviziilor laterale sub ea (pentru ceea ce, de exemplu, pentru a corupe schimbarea de culoare). M-am gândit, înălțime: 100% și fericire. Sa dovedit că totul este un pic mai complicat - cu un procentaj de indicare a înălțimii, dimensiunea diva va fi pur și simplu dimensiunea aparentă a ferestrei, cu toate consecințele care decurg din ea.
Proprietatea necesară (care permite rezolvarea problemei) nu este acceptată de diferite browsere. Prin urmare, este necesar să se prescrie separat pentru fiecare. Ideea este simplă: pentru distribuția părinte, trebuie să setați afișarea. care va permite extinderea elementelor interne (-moz-box -webkit-box -ms-flexbox - în funcție de browser), dar în interiorul blocului, care trebuie întins pentru a specifica valorile -moz-flex-box. -webkit-flex-box. ms-flex. și așa mai departe. (de asemenea, în funcție de browser).
Spațiul liber al părintelui este împărțit de suma valorilor -moz-flex-box. -webkit-flex-box sau ms-flex a tuturor descendenților imediați și este repartizată între ei proporțional cu valorile lor.
Sarcina noastră este simplificată prin faptul că se divizează vertical unul câte unul.
Iată ce sa întâmplat:
Trimiteți-le prietenilor: