Equal Heigh BS Columns

Boilerplate JSFiddle you can use for testing latest 3x Fuel UX release.

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<body style="padding: 10px;" class="fuelux">
  <div class="container" style="height: 100%" id="wrapper">
    <div class="row" id="alert">
       <div class="col-xs-12">
         alert
       </div>
    </div>
    <div class="row" id="con">
      <div class="col-xs-3 container">
        <div class="row" id="site-info">
          <div class="col-xs-12">
            test top
          </div>
        </div>
        <div class="row" id="users">
          <div class="col-xs-12">
            test bottom
          </div>
        </div>

      </div>
      <div class="col-xs-9" id="activity">
        test
      </div>
    </div>
  </div>
</body>

CSS

body {
  padding: 20px;
  height: 100%;
}

.fuelux > .container, .fuelux > .container > .row > div {
  height: 100%;
  border: 1px solid black;
}

#alert {
  height: 100px;
}

#con {
  position: absolute;
  top: 100px;
  bottom: 0;
  width: 100%;
  border: 1px solid green;
}

#users {
  position: absolute;
  top: 200px;
  bottom: 0;
  border: 1px solid red;
  width: 100%;
}

#site-info {
  height: 200px;
  border: 1px solid blue;
}

#wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}