Fill block height = 100% in a row - Twitter bootstrap

Serge
September 6, 2017
146 views
2 votes
3 Answers

How is possible to fill-in the height of a row with a cell in the following >>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. in order to be mobile compatible and also IE 11, I can’t use flex

Answers

add .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>

width absolute position jsfiddle.net/kth9vqhf

with display: table jsfiddle.net/kth9vqhf/1

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

Using jQuery you can calculate the height of .x on the fly and set that as the minimum height for the cell.

$('.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>

<!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>

Please signup or login to give your own answer.

Click here to cancel reply.

Fill block height = 100% in a row – Twitter bootstrap

Answers