Question

在以下示例中，我希望我的行使用以下规则填充父容器的总高度：

A =高度的2/6
B =高度的1/6
C =高度的3/6

这是我编写的代码：

<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row row-4 bg-primary">A</div>
  <div id="b" class="row row-2 bg-secondary">B</div>
  <div id="c" class="row row-3 bg-info">C</div>
</div>

https://codepen.io/anon/pen/mjoKpG

我应该如何解决这个问题？

Answer 1

添加这些CSS规则

.container {
    display: inline-flex;
    flex-flow: column;
}
.container > #a{
    flex:0.33 1;
}
.container > #b{
    flex:0.17 1;
}
.container > #c{
    flex:0.5 1;
}

Answer 2

使用身高百分比：

private final Response.Listener<JSONObject> onPostsLoaded = new Response.Listener<JSONObject>() {
    @Override
    public void onResponse(JSONObject response) {
        Log.i(TAG, String.valueOf(response));

https://codepen.io/anon/pen/ejXKQg

如何使Bootstrap行填充父容器的高度？

2 个答案: