如何为仅展示背景色的div强制设置指定高度？Blazor应用场景问题

我使用div来展示颜色，因此该div的实际“内容”就是背景色，这个颜色为单元格数据。
我尝试过将height设置为100%或者指定像素值，也试过设置min-height、float:left、display属性（block和table值均已测试），但最终得到的色块高度仅为50px左右，达不到我想要的600px左右的效果，使用HTML table实现也得到了相同结果。
当前页面布局如下：顶部是一个占满屏幕宽度、高度100px的文本框，下方排布三列内容：宽度70%的grid，以及两个各占15%宽度的div，总宽度为100%，我希望三者高度一致，试过给height和min-height单独或同时设置100%、固定像素值均无效。
补充说明：该项目为Blazor应用，下方的HTML会被嵌入到父容器中（@符号是Blazor中与C#交互的语法），我已经将问题简化为内嵌CSS的最简复现代码：

<div style="float:left; width: 100%; height: @LayoutRootHeight; left: 0; overflow:hidden;">
    <div style="width: 100%; height: 100px;">
        <TextArea Style="height:100px; width:100%"></TextArea>
    </div>
    <div style="width:70%; height:calc(@LayoutRootHeight - 100px); float: left;">
        <Grid Style="width:100%;">
            <Columns>
                <Column Width="70"></Column>
                <Column Width="70"></Column>
            </Columns>
        </Grid>
    </div>
    <div style="float: left; width: 15%; height:calc(@LayoutRootHeight - 100px;); background-color: @cdf_Colour1">
        <br />
    </div>
    <div style="float: left; width: 15%; height:calc(@LayoutRootHeight - 100px); background-color: @cdf_Colour2">
        <br />
    </div>
</div>

解决方案 #

你可以按以下优先级排查修复问题：

1. 修正CSS语法错误
   你代码中第一个15%宽度的色块div的height属性存在语法错误，calc(@LayoutRootHeight - 100px;)末尾多了一个多余的右括号，会导致整条height属性失效，先修改为：

height:calc(@LayoutRootHeight - 100px);

2. 确认父容器高度明确
   百分比高度生效的前提是所有上级父容器都有明确的高度赋值，不能为默认的auto。你这段代码是嵌入到父容器中的，需要先确保外层父容器已经设置了明确的高度值。你也可以先给@LayoutRootHeight设置固定测试值（比如700px），验证是不是Blazor变量渲染异常导致高度不生效。
3. 避免浮动高度塌陷
   虽然你已经给最外层div加了overflow:hidden触发BFC避免浮动塌陷，要是还有问题可以给最外层div加display: flow-root，这是专门用来清除浮动高度问题的属性，兼容性足够。
4. 提升样式优先级
   如果是Grid等组件自带的样式覆盖了你写的内联样式，可以给height属性加!important提升优先级：

height:calc(@LayoutRootHeight - 100px) !important;

5. 改用更稳妥的flex布局（推荐）
   float布局本身不适合做多列等高场景，改用flex布局可以彻底避免高度问题，修改后的代码参考：

<div style="width: 100%; height: @LayoutRootHeight; left: 0; display: flex; flex-direction: column;">
    <div style="width: 100%; height: 100px;">
        <TextArea Style="height:100px; width:100%"></TextArea>
    </div>
    <!-- 新增flex容器包裹三列内容 -->
    <div style="display: flex; flex: 1;">
        <div style="width:70%;">
            <Grid Style="width:100%;height:100%;">
                <Columns>
                    <Column Width="70"></Column>
                    <Column Width="70"></Column>
                </Columns>
            </Grid>
        </div>
        <div style="width: 15%; background-color: @cdf_Colour1"></div>
        <div style="width: 15%; background-color: @cdf_Colour2"></div>
    </div>
</div>

flex布局下子元素会自动撑满父容器高度，不需要手动给每个子元素设置高度，也不需要写float，稳定性更高。

内容的提问来源于stack exchange，提问作者XYZZY69