gpt4 book ai didi

css - Angular 6 垂直 50-50 高度的 flex 布局

转载 作者:行者123 更新时间:2023-12-04 15:54:17 40 4
gpt4 key购买 nike

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

最佳答案

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

关于css - Angular 6 垂直 50-50 高度的 flex 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52539597/

40 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com