html - 使 div 背景高度为 100%

Question

如何使我的 div 背景高度为 100%，具体取决于它的父级高度:这就是我现在所拥有的:

我想用红色和背景色填充所有空间:

这是我的 HTML 代码:

<div class="row" style="margin-bottom: 20px">
        <div class="col-6"><img style="width: 100%" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg"></div>
        <div class="col-6 class1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <img src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" style="width:100%">
        </div>
    </div> 

那是我的 CSS:

.class1{
            background-color: yellow;
            height: 100%;
        }

感谢您的帮助:-)

Answer 1

请引用以下链接: https://jsfiddle.net/ulric_469/7mh4vs6p/6/

给图片增加100%的高度

    .row {
     display: flex;
     align-items: stretch;
   }

   .row > div {
     flex: 1
   }