Angular Material 嵌套列高计算
Angular Material Nested Column Height Calculation
更新
最新的 Firefox 和 Edge 中似乎出现了预期的行为 - 这可能是 Chrome 独有的问题(不敢相信我输入了那个...)
Here 是说明问题的代码笔。这是代码:
HTML
<div class="thingone" layout="column" flex="100" layout-fill>
<div class="thingtwo" layout="column" flex="75">
<div class="thingfour" layout="column" flex="25"></div>
<div class="thingfive" layout="column" flex="75"></div>
</div>
<div class="thingthree" layout="column" flex="25"></div>
</div>
CSS
.thingone {
background-color: red;
}
.thingtwo {
background-color: blue;
border: 10px solid black;
}
.thingthree {
background-color: green;
border: 10px solid white;
}
.thingfour {
background-color: yellow;
}
.thingfive {
background-color: orange;
}
我的最终目标是看到总共三个栏 - 前两个包裹在一个栏中,占据父级可用区域的 75%,最后一个仅占父级可用区域的 25%。前两个栏应分别占其父级区域的 25% 和 75%。
正如您从 codepen 中看到的那样,我很接近,但子列不遵守其 25% 和 75% 的弹性分配。作为一个简单的例子,我很难理解为什么。
理想情况下,我想要一个不涉及行的解决方案(因为真正的 UI 这个示例是根据需要列建模的)除非列嵌套在行中。
也许更重要的是 - 什么是解释这里发生的事情的简单方法?在处理 flex 中的嵌套列时是否必须应用 'rule'(例如始终为父元素提供显式高度分配)?
谢谢!
该问题的解决方案是在尝试让元素填充可用垂直 space 时不使用 'thingtwo' 元素上的 'layout-fill' 属性。 'layout-fill' 指定 min-height CSS 属性以及似乎导致布局问题的高度属性。
以下是为遇到类似问题的人提供的解决方案:
HTML
<div class="thingone" layout="column" flex="100">
<div class="thingtwo" layout="column" flex="75">
<div class="thingfour" layout="column" flex="25"></div>
<div class="thingfive" layout="column" flex="75"></div>
</div>
<div class="thingthree" layout="column" flex="25"></div>
</div>
CSS
.thingone {
background-color: red;
height: 100%;
}
.thingtwo {
background-color: blue;
border: 10px solid black;
height: 100%;
}
.thingthree {
background-color: green;
border: 10px solid white;
}
.thingfour {
background-color: yellow;
}
.thingfive {
background-color: orange;
}
更新
最新的 Firefox 和 Edge 中似乎出现了预期的行为 - 这可能是 Chrome 独有的问题(不敢相信我输入了那个...)
Here 是说明问题的代码笔。这是代码:
HTML
<div class="thingone" layout="column" flex="100" layout-fill>
<div class="thingtwo" layout="column" flex="75">
<div class="thingfour" layout="column" flex="25"></div>
<div class="thingfive" layout="column" flex="75"></div>
</div>
<div class="thingthree" layout="column" flex="25"></div>
</div>
CSS
.thingone {
background-color: red;
}
.thingtwo {
background-color: blue;
border: 10px solid black;
}
.thingthree {
background-color: green;
border: 10px solid white;
}
.thingfour {
background-color: yellow;
}
.thingfive {
background-color: orange;
}
我的最终目标是看到总共三个栏 - 前两个包裹在一个栏中,占据父级可用区域的 75%,最后一个仅占父级可用区域的 25%。前两个栏应分别占其父级区域的 25% 和 75%。
正如您从 codepen 中看到的那样,我很接近,但子列不遵守其 25% 和 75% 的弹性分配。作为一个简单的例子,我很难理解为什么。
理想情况下,我想要一个不涉及行的解决方案(因为真正的 UI 这个示例是根据需要列建模的)除非列嵌套在行中。
也许更重要的是 - 什么是解释这里发生的事情的简单方法?在处理 flex 中的嵌套列时是否必须应用 'rule'(例如始终为父元素提供显式高度分配)?
谢谢!
该问题的解决方案是在尝试让元素填充可用垂直 space 时不使用 'thingtwo' 元素上的 'layout-fill' 属性。 'layout-fill' 指定 min-height CSS 属性以及似乎导致布局问题的高度属性。
以下是为遇到类似问题的人提供的解决方案:
HTML
<div class="thingone" layout="column" flex="100">
<div class="thingtwo" layout="column" flex="75">
<div class="thingfour" layout="column" flex="25"></div>
<div class="thingfive" layout="column" flex="75"></div>
</div>
<div class="thingthree" layout="column" flex="25"></div>
</div>
CSS
.thingone {
background-color: red;
height: 100%;
}
.thingtwo {
background-color: blue;
border: 10px solid black;
height: 100%;
}
.thingthree {
background-color: green;
border: 10px solid white;
}
.thingfour {
background-color: yellow;
}
.thingfive {
background-color: orange;
}