Angular 6 垂直 50-50 高度的弹性布局

Question

我将 FlexLayoutModule 与 Angular6 一起使用，并尝试实现两个 div 的垂直高度均为 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>

Link of so far working example

This is what I'm trying to achieve

Answer 1

您可以使用 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>

Answer 2

我对您的示例进行了一些更改，使两个 div 垂直分割屏幕 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;
}

Here is a link to the updated example.

Angular 6 垂直 50-50 高度的弹性布局

Flex-layout with Angular 6 vertical 50-50 height

css

angular

flexbox

angular6

angular-flex-layout