Flex Item即使内容为空也有特定的高度
Flex Item to have specific height even when empty content
我目前正在为以下代码使用 angular flexbox。
我想让中间的弹性项目(div,更具体地说)有一个特定的高度,即使它的内容是空的。
解决方案应该包括使用纯粹的弹性属性来提供高度,除非这是不可能的。
<div fxLayout="column" style="height:100vh">
<header style="background-color: lightblue;" >
Header
</header>
<div style="background-color: orange;" >
</div>
<footer style="background-color: yellow"> Footer </footer>
</div>
您可以向它添加 fxFlex 以给它一个高度,这应该可以工作,因为它位于具有固定高度的列 div 内(您可以调整 fxFlex 中的值以适合您的需要)。
<div fxFlex="50" style="background-color: orange;">
</div>
您还可以在同一个 div 上使用 fxFill 来填充所有可用的 space:
<div fxFill style="background-color: orange;">
</div>
<div fxLayout="column" style="height:100vh">
<header style="background-color: lightblue;" >
Header
</header>
<div style="background-color: orange;" fxFlexFill>
</div>
<footer style="background-color: yellow"> Footer </footer>
</div>
fxFlexFill 指令应用于 fxLayout 容器内的元素,并标识其宽度和高度应最大化的元素
我目前正在为以下代码使用 angular flexbox。
我想让中间的弹性项目(div,更具体地说)有一个特定的高度,即使它的内容是空的。
解决方案应该包括使用纯粹的弹性属性来提供高度,除非这是不可能的。
<div fxLayout="column" style="height:100vh">
<header style="background-color: lightblue;" >
Header
</header>
<div style="background-color: orange;" >
</div>
<footer style="background-color: yellow"> Footer </footer>
</div>
您可以向它添加 fxFlex 以给它一个高度,这应该可以工作,因为它位于具有固定高度的列 div 内(您可以调整 fxFlex 中的值以适合您的需要)。
<div fxFlex="50" style="background-color: orange;">
</div>
您还可以在同一个 div 上使用 fxFill 来填充所有可用的 space:
<div fxFill style="background-color: orange;">
</div>
<div fxLayout="column" style="height:100vh">
<header style="background-color: lightblue;" >
Header
</header>
<div style="background-color: orange;" fxFlexFill>
</div>
<footer style="background-color: yellow"> Footer </footer>
</div>
fxFlexFill 指令应用于 fxLayout 容器内的元素,并标识其宽度和高度应最大化的元素