平板端2×2布局卡片无法占满屏幕高度的解决咨询

使用Bootstrap开发页面，将4张卡片设置为2×2布局，但在平板（iPad）端展示时，卡片仅占据屏幕一半高度，希望实现卡片铺满整个屏幕且尺寸统一的效果。

当前代码 #

<style>
  body {
    background: url("images/fondo_con_formas_op.png") no-repeat center
      center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 90%;
  }

  .columna1,
  .columna2,
  .columna3,
  .columna4,
  .columna5 {
    width: 100%;
    margin: 10px;
  }

  .boton {
    background: #f79206;
    color: white;
    font-weight: 500;
    font-size: 25px;
    padding: 10px;
    border-radius: 18px;
    transition: transform 0.2s;
    width: 40%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 5px 5px #888888;
    text-align: center;
  }

  @media (min-width: 600px) {
    .columna2,
    .columna3,
    .columna4,
    .columna5 {
      width: 47%;
      background-color: white;
      border-radius: 25px;
      padding: 15px;
    }
  }
</style>


<body style="display: grid; place-items: center">
<div class="container">
  <section class="columna1">
    <div class="boton">Selecciona tu pedido</div>
  </section>
  <section class="columna2">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna3">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna4">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/regalo.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">REGALO SORPRESA</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna5">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/merch.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X MERCH</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>


<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

效果对比 #

当前平板端展示效果 #

期望实现的平板端布局 #

通过调整布局的高度控制和flex属性，实现卡片铺满屏幕且尺寸统一的效果，具体修改如下：

1. 设置页面和容器的全屏高度
   给body添加最小高度并使用flex布局，让容器能利用剩余视口空间：

   body {
     min-height: 100vh;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
   .container {
     display: flex;
     flex-flow: row wrap;
     width: 90%;
     min-height: calc(100vh - 80px); /* 减去顶部按钮的高度 */
     justify-content: space-between;
   }
   

2. 统一卡片高度并垂直居中内容
   在媒体查询中给卡片设置最小高度，确保两行卡片平分容器高度，同时让内部内容垂直居中：

   @media (min-width: 600px) {
     .columna2, .columna3, .columna4, .columna5 {
       width: 47%;
       background-color: white;
       border-radius: 25px;
       padding: 15px;
       min-height: calc(50% - 15px); /* 平分容器高度，减去间距 */
       display: flex;
       flex-direction: column;
       justify-content: center;
     }
     /* 确保卡片内部的row占满高度 */
     .columna2 .row, .columna3 .row, .columna4 .row, .columna5 .row {
       height: 100%;
     }
   }
   

3. 优化间距和移除冲突样式
   调整顶部按钮的上下间距，移除body的内联grid布局避免冲突：

   .boton {
     margin-top: 10px;
     margin-bottom: 10px;
   }
   

修改后的完整代码 #

<style>
  body {
    background: url("images/fondo_con_formas_op.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .container {
    display: flex;
    flex-flow: row wrap;
    width: 90%;
    min-height: calc(100vh - 80px);
    justify-content: space-between;
  }

  .columna1,
  .columna2,
  .columna3,
  .columna4,
  .columna5 {
    width: 100%;
    margin: 10px 0;
  }

  .boton {
    background: #f79206;
    color: white;
    font-weight: 500;
    font-size: 25px;
    padding: 10px;
    border-radius: 18px;
    transition: transform 0.2s;
    width: 40%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 2px 5px 5px #888888;
    text-align: center;
  }

  @media (min-width: 600px) {
    .columna2,
    .columna3,
    .columna4,
    .columna5 {
      width: 47%;
      background-color: white;
      border-radius: 25px;
      padding: 15px;
      min-height: calc(50% - 15px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .columna2 .row, .columna3 .row, .columna4 .row, .columna5 .row {
      height: 100%;
    }
  }
</style>


<body>
<div class="container">
  <section class="columna1">
    <div class="boton">Selecciona tu pedido</div>
  </section>
  <section class="columna2">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna3">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/shot 18.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
            <p class="card-text color-text">Delicioso shot de mora azul.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna4">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/regalo.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">REGALO SORPRESA</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="columna5">
    <div style="cursor: pointer" onclick="window.location='fin.html';">
      <div class="row g-0">
        <div
          class="col-md-4 m-0 row justify-content-center align-items-center"
        >
          <img
            src="images/merch.png"
            class="img-fluid rounded-start"
            alt="..."
          />
        </div>
        <div
          class="col-md-8 m-0 row justify-content-center align-items-center"
        >
          <div class="card-body">
            <h5 class="card-title color-text">EL GENIO X MERCH</h5>
            <p class="card-text color-text"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>


<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

内容的提问来源于stack exchange，提问作者streaming-coc