无法使背景使100％的响应高度

Question

我有这样的html代码，

<div class="container-fluid" style="height:calc(100vh - 120px)">
 <div class="row h-100" style="margin-top:20px;">
    <div class="col-lg-10 col-md-12 col-xs-12 h-100  div-border-shadow   mx-auto " >
           <div class="row mt-3">
            <div class="col-lg-10 col-md-12 col-sm-12 text-center   mx-auto">
                <div id="gallery" class="clearfix">                        
                    @for (int i =0; i<8 ; i++)
                    {
                        <div class="gallery-div-format d-inline-block" style="width:200px; height:200px; background-color:red">                               
                                
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>
</div>

它制作了一个页面

这是CSS

 .div-border-shadow {
width: 100%;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}

 .gallery-div-format {
margin-left: 10px;
margin-right: 10px;
border-radius: 10px;
box-shadow: 0 5px 5px 3px rgba(0,0,0,0.4);
}

，但要检查页面响应迅速（当我使浏览器较小时）变成

您可以看到白色背景不会扩展，我希望白色背景延伸，只要红色框重复。我的代码的哪一部分是错误的？

Answer 1

如果您从下面的标签中删除H-100类，则可以正确显示：

...
<div class="col-lg-10 col-md-12 col-xs-12 h-100  div-border-shadow mx-auto ">
  ...
</div>
....