CSS 高度 100% 在 ipad 浏览器中不工作
CSS height 100% not working in ipad browser
我已尝试为我的要素集设置等高列。它的一切在桌面和移动 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>
my webiste url Featured Collection
我的 ipad 这是我得到的,如下图所示。
有时 height
和 min-height
无法在 ipad 和 safari 浏览器上运行。您可以使用 display:flex
follow flexbox group 来对齐 等列高度 ,如下例所示。
.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>
我已尝试为我的要素集设置等高列。它的一切在桌面和移动 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>
my webiste url Featured Collection
我的 ipad 这是我得到的,如下图所示。
有时 height
和 min-height
无法在 ipad 和 safari 浏览器上运行。您可以使用 display:flex
follow flexbox group 来对齐 等列高度 ,如下例所示。
.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>