CSS高度100％在iPad瀏覽器中不起作用

Question

我嘗試為要素集合設置高度相等的列。 在台式機和移動ipad屏幕上，一切正常。 但是當我檢查真實設備時， height:100%無法正常工作。 我也嘗試過“ height：100vh”。

<div class="feature-category default-padding bg-white">
    <div class="full container">
        <div class="cartHomeTitle text-center mb-4">
            <h3>Featured Collection</h3>
        </div>
        <div class="row mycolspce">
            <div class="col-md-6">
                <div class="feature-imgitem d-flex align-self-stretch h-100">
                    <a class="banner_effect" href="#">
                        <img src="img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">
                    </a>
                    <div class="fc-meta">
                        <h4>Men</h4>
                        <p>New Collection</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="feature-imgitem">
                    <a class="banner_effect" href="#">
                        <img src="img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">
                    </a>
                    <div class="fc-meta left">
                        <h4>Shirts</h4>
                        <p>8 Item</p>
                    </div>
                </div>
                <div class="row mt-4">                  
                    <div class="col-md-6">
                        <div class="feature-imgitem">
                            <a class="banner_effect" href="#">
                                <img src="img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">
                            </a>
                            <div class="fc-meta left">
                                <h4>Bags</h4>
                                <p>8 Item</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="feature-imgitem">
                            <a class="banner_effect" href="#">
                                <img src="img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">
                            </a>
                            <div class="fc-meta">
                                <h4>SALE</h4>
                                <p>FASHION SHOES</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div> <!--//container-->
</div>

我的網站網址精選集

我的ipad這是我根據下面的圖片得到的。

Answer 1

有時， height和min-height在ipad和safari瀏覽器上不起作用。 您可以使用display:flex跟隨flexbox組將相等的列高對齊，如下例所示。

 .row.mycolspce div[class^="col-"] { display: flex; flex-wrap: wrap; } .feature-imgitem img { object-fit:cover; } .feature-imgitem,.banner_effect { display:flex; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row mycolspce"> <div class="col-md-6"> <div class="feature-imgitem"> <a class="banner_effect" href="#"> <img src="http://orderonline.my/demo.mybizcart/img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection"> </a> </div> </div> <div class="col-md-6"> <div class="feature-imgitem"> <a class="banner_effect" href="#"> <img src="http://orderonline.my/demo.mybizcart/img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection"> </a> </div> <div class="row mt-4"> <div class="col-md-6"> <div class="feature-imgitem"> <a class="banner_effect" href="#"> <img src="http://orderonline.my/demo.mybizcart/img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection"> </a> </div> </div> <div class="col-md-6"> <div class="feature-imgitem"> <a class="banner_effect" href="#"> <img src="http://orderonline.my/demo.mybizcart/img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection"> </a> </div> </div> </div> </div> </div> </div>