¿Cómo es posible completar la altura de una fila con una celda en el siguiente >> JSFiddle :

.x                    { height: 50px;          }
.row                  { background: #eee;      }
.row>:nth-child(odd)  { background: lightblue; }
.row>:nth-child(even) { background: pink;      }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">fill height v</div>
  <div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>

PS. para ser compatible con dispositivos móviles y también IE 11, no puedo usar flex

0
Serge 6 sep. 2017 a las 19:21

3 respuestas

La mejor respuesta

Agregar .row{display: flex}

.x {  height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
  background: lightblue;
}

.row>:nth-child(even) {
  background: pink;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3 cell">fill height v</div>
  <div class="col-xs-9 cell">
    <div class="x"> unknown height </div>
  </div>
</div>
jsfiddle.net/kth9vqhf

Con pantalla: tabla jsfiddle.net/kth9vqhf/1

Con jQuery https://jsfiddle.net/kth9vqhf/3/

1
Dmytro Lishtvan 6 sep. 2017 a las 17:11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fill Row Height </title>
    <style>
        .WrapperRow{float: left; display: table; table-layout:  fixed; vertical-align: top; width: 100%;}
        .WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
        .bgblue{background-color: blue;}
        .cell.bgblue{width: 30%;}
        .bgpink{background-color: pink;}
    </style>    
</head>
<body>
    <div class="WrapperRow">
        <div class="cell bgblue">
        </div>
        <div class="cell bgpink">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
        </div>
    </div>
</body>
</html>
0
Gaurav Madaan 6 sep. 2017 a las 16:40

Con jQuery puede calcular la altura de .x sobre la marcha y establecerla como la altura mínima para la celda.

$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");
.x {
  height: 50px;
}

.row {
  background: #eee;
}

.row>:nth-child(odd) {
  background: lightblue;
}

.row>:nth-child(even) {
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-3 cell">fill height v</div>
  <div class="col-xs-9 cell">
    <div class="x"> unknown height </div>
  </div>
</div>
0
I haz kode 6 sep. 2017 a las 16:31