iPad 具有弹性 - 高度

Question

基本上我有一行 3 列，列有图像和文本。

在 chrome、Android、Fire-Fox 中，我设法让每一列的高度都是父级的高度，如果其他列更大，则将文本放在中间。但是在 iPad 和 iOS 8.3 和 9.3.5 中，不会使列在 100% 的高度处变大。

代码笔是：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 的解决方案。我也借此机会优化了您的代码。您不应该在锚标记内使用块元素，例如 divs。

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%;
      }
    }
  }
}

这是一支工作笔 - https://codepen.io/scooterlord/pen/NXWmQJ 太晚了，我正在沙发上写作，所以我没有在我的 iPad 上测试它，但我相当确定它有效。

编辑2: 刚刚才明白要求的是什么，最初对问题的描述不是很清楚。这是一个新的代码笔，其中包含所要求的内容：

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

iPad 具有弹性 - 高度

iPad's with flex - Height

css

height

ipad

ios

flexbox