具有 Angular 6 垂直 50-50 高度的 Flex 布局

Posted 2023-03-06

【中文标题】具有 Angular 6 垂直 50-50 高度的 Flex 布局

【英文标题】：Flex-layout with Angular 6 vertical 50-50 height

【发布时间】：2019-03-03 12:32:33

【问题描述】：

我正在使用带有 Angular6 的 FlexLayoutModule 并尝试在垂直方向上实现两个 50% 高度的 div。我已经尝试过这个特定的代码，但两者都没有占据父级的 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

【参考方案1】：

我对您的示例进行了一些更改，让两个 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.

【参考方案2】：

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

【讨论】：

我试过了，但我的容器是 100% 的主体，它有两个 50 像素的标题。

如果我使用 50vh，它会向下滚动标题的高度。但我想适合我父母的身高。