无法使背景在响应式中使 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 class，它会正确显示：

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

无法使背景在响应式中使 100% 高度

can not make the background makes the 100% height in responsive

html

css

bootstrap-4