skip to Main Content

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

3

Answers


  1. 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/

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. <!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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search