iPadのフレックス高さ

Question

基本的に私は3列の列を持っており、列には画像とテキストがあります。

Android、Fire-Foxでは、各列の親の高さを取得し、他の列が大きい場合はテキストを中央に配置しました。しかし、iOS 8.3と9.3.5のiPadでは、縦幅を高さの100％にすることはできません。

codepenがある：https://codepen.io/rocketraccoon/pen/PEopPO

そして、ここで私はスニペットを残す：

body { 
 
    background-color: red !important; /* Only for trying to see the visual effect required */ 
 
} 
 

 
.triple-opcion { 
 
    padding: 40px; 
 
} 
 

 
.triple-opcion .opciones .opcion { 
 
    background-color: #FFFFFF; 
 
    text-align: center; 
 
    padding: 40px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.triple-opcion .opciones .opcion:hover, 
 
.triple-opcion .opciones .opcion:focus, 
 
.triple-opcion .opciones .opcion:active { 
 
    text-decoration: none; 
 
} 
 

 
.triple-opcion .opciones .opcion .t5 { 
 
    text-transform: uppercase; 
 
    color: #191D22; 
 
    margin: auto; 
 
    max-width: 100%; 
 
} 
 

 
.triple-opcion .opciones .opcion img { 
 
    width: 64px; 
 
    margin-bottom: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="triple-opcion ayuda"> 
 
    <div class="row opciones opciones-ayuda"> 
 
    <div class="col-4"> 
 
     <a href="#> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="col-4"> 
 
     <a href="#"> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">24 months</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="col-4"> 
 
     <a href="#"> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">48 months</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

あなたが提供できるすべてのヘルプは参考になります。

Answer 1

ここにはtableを使用する解決策があります。私はあなたのコードを最適化する機会も得ました。アンカータグの中にブロック要素、例えばdivを使用しないでください。

HTML：

<div class="triple-opcion ayuda"> 
    <div class="row opciones opciones-ayuda"> 
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner"> 
     <img src="http://via.placeholder.com/300" alt="Buscador de números"> 
     <span class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500 
     </span> 
     </a> 
    </div>   
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner"> 
     <img src="http://via.placeholder.com/300" alt="Preguntas frecuentes"> 
     <span class="t5">24 months</span> 
     </a> 
    </div>  
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner">  
     <img src="http://via.placeholder.com/300" alt="Sugerencias"> 
     <span class="t5">48 months</span> 
     </a> 
    </div> 
    </div> 
</div> 

SCSS：ここ

body { 
    background-color: red; 
} 
.triple-opcion { 
    .opciones { 
    display:table; 
    table-layout:fixed; 
    width:100%; 
    border-spacing: 40px; 
    border-collapse: separate; 

    .opcion { 
     text-align: center; 
     padding: 40px; 
     display: table-cell; 
     height: 100%; 
     background:#fff; 
     vertical-align:middle; 

     span { 
     display:block; 
     } 

     &:hover, 
     &:focus, 
     &:active { 
     text-decoration: none; 
     } 
     img { 
     width: 64px; 
     } 
     .t5 { 
     text-align: center; 
     margin: auto; 
     max-width: 100%; 
     } 
    } 
    } 
} 

が作業ペンです - と私はソファから書いていますので、私は私のiPadでそれをテストしていない手遅れ https://codepen.io/scooterlord/pen/NXWmQJ しかし、それはかなり確実に機能します。

編集2：私はちょうど何が要求されたのか分かりました、問題の最初の記述はあまり明確ではありませんでした。ここで要求されるものと新しいcodepenです：

https://codepen.io/scooterlord/pen/eymprK