当div淡入时，滚动条不会展开（Jquery）

Question

你好，所有的世界建设者:) 我正在使用jquery函数来显示和隐藏几个带有fadeIn和fadeOut函数的div。 它们默认是不可见的，当我更改选项时，它们会淡入淡出。 问题是当滚动条中的div消失而未展开且页脚消失时。 （对不起，我的英语不好）。 这是我的代码：

$('#act_type').change(function(){
           var divID = $(this).children('option:selected').attr('value');
           if(divID == '1'){
                $('#haqiqi').fadeOut(1000);
                $('#haqiqi2').fadeOut(500);
                $('#hoquqi').fadeIn(500);
                $('#hoquqi2').fadeIn(500);
                $('#hoquqi3').fadeIn(500);
           }else if(divID == '2'){
                $('#hoquqi').fadeOut(1000);
                $('#hoquqi2').fadeOut(1000);
                $('#hoquqi3').fadeOut(1000);
                $('#haqiqi').fadeIn(500);
                $('#haqiqi2').fadeIn(500);
           }else if(divID == '3'){
                $('#hoquqi').fadeIn(500);
                $('#hoquqi2').fadeIn(500);
                $('#hoquqi3').fadeIn(500);
                $('#haqiqi').fadeIn(500);
                $('#haqiqi2').fadeIn(500);
           }else{
                $('#hoquqi').fadeOut(1000);
                $('#hoquqi2').fadeOut(1000);
                $('#hoquqi3').fadeOut(1000);
                $('#haqiqi').fadeOut(1000);
                $('#haqiqi2').fadeOut(1000);
           }
        });

<div class="row">
    <div class="col-md-6" id="zero-m">
        <div class="form-group">
            <label>Choosing options:</label>
            <div class="col-lg-12">
                <select name="act_type" id="act_type" class="form-control">
                    <option value="">-- Please Select --</option>
                    <option value="1">Huquqi</option>
                    <option value="2">Haqiqi</option>
                    <option value="3">both</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="header bg-orange">
        <h5>
           Card Header Text Here <small></small>
        </h5>
    </div>
    <div class="body">
        <div id="haqiqi">
            <div class="row">
                <div class="col-md-6" id="zero-m">
                    <div class="form-group">
                        <label>something here:</label>
                        <div class="col-lg-12">
                            <input class="form-control" type="text" placeholder="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="haqiqi2">
          <div class="row">
            <div class="col-md-6" id="zero-m">
                <div class="form-group">
                    <label>something here:</label>
                    <div class="col-lg-12">
                        <input class="form-control" type="text" placeholder="" />
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="header bg-orange">
        <h5>
           Card Header Text Here <small></small>
        </h5>
    </div>
    <div class="body">

        <div id="hoquqi">
            <div class="row">
                <div class="col-md-6" id="zero-m">
                    <div class="form-group">
                        <label>something here:</label>
                        <div class="col-lg-12">
                            <input class="form-control" type="text" placeholder="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="hoquqi2">
            <div class="row">
                <div class="col-md-6" id="zero-m">
                    <div class="form-group">
                        <label>something here:</label>
                        <div class="col-lg-12">
                            <input class="form-control" type="text" placeholder="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="hoquqi3">
            <div class="row">
                <div class="col-md-6" id="zero-m">
                    <div class="form-group">
                        <label>something here:</label>
                        <div class="col-lg-12">
                            <input class="form-control" type="text" placeholder="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

如您所见，我已将它们放在两张分开的卡片中。如果我将它们放在一张卡片中就没有问题，但我不能这样做，因为我需要卡片标题和样式。

我该如何解决这个问题？