Flex-раскладка с Angular 6 вертикальной высотой 50-50 - PullRequest
Новая
       19

Flex-раскладка с Angular 6 вертикальной высотой 50-50

0 голосов
/ 27 сентября 2018

Я использую FlexLayoutModule с Angular6 и пытаюсь достичь двух делений высоты 50% по вертикали.Я пробовал этот конкретный код, но оба не занимают 50% высоты родителя. 

<div style="min-height:50px">I'm header</div>
<div style="height:100%">
<div fxLayout="column" fxLayoutGap="12px">
    <div fxFlex="50%" style="background:#5896FF">
        <h1>I should occupy 50% height of my parent</h1>
    </div>
    <div fxFlex="50%" style="background:#525252">
        <h1>I should occupy 50% height of my parent</h1>
    </div>
</div>

Ссылка рабочего примера

Это то, чего я пытаюсь достичь

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Я сделал пару изменений в вашем примере, чтобы разделить два делителя экрана по вертикали 50/50. 

<div style="height:100%" fxLayout="column">
    <div style="min-height:50px">I'm header</div>
    <div fxLayout="column" fxLayoutGap="12px" fxFlex>
        <div fxFlex style="background:#5896FF">
            <h1>I should occupy 50% height of my parent</h1>
        </div>
        <div fxFlex style="background:#525252">
            <h1>I should occupy 50% height of my parent</h1>
        </div>
    </div>
</div>

Вам также необходимо обновить styles.css: 

html, body {
    height: 100%;
    margin: 0;
}

Вот ссылка на обновленный пример.

0 голосов
/ 27 сентября 2018

Вы можете использовать 50vh вместо 50%.он будет использовать 50% вертикальной высоты. 

<div fxLayout="column" fxLayoutGap="12px" style="">
<div fxFlex="50vh" style="background:#5896FF">
    <h1>I should occupy 50% height</h1>
</div>
<div fxFlex="50vh" style="background:#525252">
    <h1>I should occupy 50% height</h1>
</div>
...