Question

因此，我一直在寻找解决方案，但找不到任何地方。

我尝试了flex-grow: 1;，align-self: stretch;和其他一些flexbox属性，但似乎没有一个办法解决问题。

我想拉伸最后一列，并占据该行的剩余高度。

每个人都说我做了一些调整，但是仍然不是我需要的。

（蓝色框是我想要伸展的东西）

查看以下代码段：

.product {
  border: 1px solid rgba(0,0,0,.2);
  padding: 15px;
  height: 100%;
}

.product .image {
  padding-bottom: 100%;
  background: rgba(255,0,0,.2);
  margin-bottom: 15px;
}

.product .content {
  border: 1px solid blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                The height of this is dynamic.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                It can vary from product to product, but I would like this class to stretch.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                To fill the rest of the columns height.
              </div>
            </div>
        </div>
        
    </div>
</div>

Answer 1

好，所以我可以通过添加以下内容来解决此问题：

display: flex;
flex-direction: column;

进入我的.product班级，并放置：

flex-grow: 1;

在我的.content班上。

感谢大家的帮助！：）

Answer 2

我是在jsfiddle https://jsfiddle.net/e4sufy7k/1/

上完成的

我删除了您的内行和列，然后将height: 100%添加到您的.card .body中。是您所期望的吗？

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}
    
.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4 card">
            
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    This should match the height of the talest card.
                </div>
           
        </div>
        
        <div class="col-4 card">
           
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class=" body">
                    Stretch me please!
                </div>
            
        </div>
        
        <div class="col-4 card">
          
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    I should be dynamic and stretch to fill the rest of the column!
                </div>
            </div>
        </div>
        
    </div>
</div>

Answer 3

您必须将card div放在col-4内，并将其拉伸到100％，以确保其尺寸与父级相同。之后，只需将body的高度也设置为100％。

喜欢：

<div class="container">
    <div class="row">

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    This should match the height of the tallest card.
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    Stretch me please!
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    I should be dynamic and stretch to fill the rest of the column!
                </div>
            </div>
        </div>

    </div>
</div>

这样的样式：

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
    height: 100%;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}

.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    width: 100%;
    height: 100%;
}

Answer 4

在Bootstrap中，.row是flex-box容器，因此只有直属子级（.col）可以彼此交互。在您的示例中，您要拉伸的col个项目不是彼此的兄弟姐妹，因此它们彼此之间无法应用拉伸。

.card元素是.row的兄弟姐妹，因此它们确实获得了应用效果。

要获得想要入侵的.col，他们必须是兄弟姐妹。

<style>
    .card-head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .card-body {
        padding: 15px;
        background: #fff;
        color: #000;
        border: 1px solid red;
    }
</style>
<div class="container">
    <div class="row no-gutter">
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
    </div>
    <div class="row no-gutter">
        <div class="col-4 card-body">
            This should match the height of the talest card.
        </div>
        <div class="col-4 card-body">
            Stretch me please!
        </div>
        <div class="col-4 card-body">
            I should be dynamic and stretch to fill the rest of the column!
        </div>
    </div>
</div>

或者，您可以按自己的方式保留html标记，并使用样式使它按需显示。如果将.card的背景和颜色样式移至.head，它将根据需要显示。

.card {
    border: 1px dashed red;
    border-radius: 0;

    .head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .body {
        padding: 15px;
        background: #fff;
        color: #000;
    }
}

拉伸列以填充剩余的行高

4 个答案: