Question

我正在努力让这个html布局工作：

<div class="card" style="height: 100%;">
    <div class="card-header">Title</div>
    <div class="card-block>
        <chart class="row" style="height: 100%"></chart>
    </div>
</div>

这里的问题是，虽然卡片具有所需的高度，但忽略<chart>元素的高度，因为其父（<div class="card-block">）没有明确的高度。

我应该如何修改此代码段，以使<chart>元素将整个卡片与卡片头所需的部分区分开来？

编辑：这是整个布局：

<section class="row equal my-md-3" style="height: 100%">
    <div id="left-col" class="col-md-4 pr-md-2">...</div>
    <div id="right-col" class="col-md-8 pl-md-2" style="display: flex; flex-direction: column">
        <featured-graphs-component style="flex-grow: 1; height: 100%;"></featured-graphs-component>
        <period-table-component class="mt-md-3" style="display: inline-block;"></period-table-component>
    </div>
</section>

<featured-graphs-component>是上述卡片。

EDIT2：JsFiddle重现问题：https://jsfiddle.net/zmcode/uk97kfLm/7/

Answer 1

您可以使用flex布局来获得所需内容：

将.card的{{1}}设为display，将flex设为flex-direction。
将column的{{1}}设为.card-block

就是这样。 flex将灵活占据所有剩余空间。

代码如下：

已制作jsfiddle，请检查。

Answer 2

从OPC Compliance error [M4.1]: there is more than one core properties relationship in the package !中删除填充，并使用（.d-flex）制作图表.card-block ..

display:flex

http://www.codeply.com/go/r9SJE984O8

编辑 - 根据添加的更新代码。 CSS <section class="row my-md-3"> <div id="left-col" class="col-md-4 pr-md-2">...</div> <div id="right-col" class="col-md-8 pl-md-2"> <div class="card"> <div class="card-header">Title</div> <div class="card-block bg-faded p-0"> <chart class="bg-info d-flex"> chart <br><br> <br><br> <br><br> </chart> </div> </div> </div> </section>仅在包含元素具有已定义高度时才有效。只需添加一个高度：height:100%。此外，#chart-card-container在Bootstrap 4中设置h-100。

http://www.codeply.com/go/6Yal88nBaT

Bootstrap卡：设置正确的卡块高度

2 个答案: