title: Equal height of child divs in Bootstrap columns - Chrome and Safari
body: <p><a href="http://jsfiddle.net/7q4xjs25/7/" rel="nofollow">FIDDLE</a></p>
  
  <p>Basically, the goal is to have side-by-side columns with dynamically-generated content, and have the divs inside the columns be the same height as the div with the longest content.  The important thing is not only that the Bootstrap columns be the same height, but their <em>child divs</em> also be the same height.  </p>
  
  <p>After cobbling together answers from several different questions, I finally managed to get this to work by using a combination of <code>table-cell</code> and setting the height of everything to 100%:</p>
  
  <pre><code>@media (min-width: 768px) {
  
      .row {
          display: table-row;
          min-height: 100%;
          height: 100%;
      }
  
      [class*="col-"]{
          float: none;
          display: table-cell;
          background-color: red;  /* Color set just to confirm column heights */
          min-height: 100%;
          height: 100%;
          padding-bottom: 30px;
      }
  }
  
  .papers {
      color: #181818;
      border: #ccc solid 1px;
      background-color: #fffaec;
      box-shadow: 
          4px 4px 0 #fffaec,
          5px 5px 0 #ccc,
          9px 9px 0 #fffaec,
          10px 10px 0 #ccc,
          14px 14px 0 #fffaec;
      padding: 0px 30px;    
      text-align: left;
      min-height: 100%;
      height: 100%;
  }
  
  .papers:hover {
      background-color: #e9e5d9;
      box-shadow:
          4px 4px 0 #e9e5d9,
          5px 5px 0 #ccc,
          9px 9px 0 #e9e5d9,
          10px 10px 0 #ccc,
          14px 14px 0 #e9e5d9; 
  }
  </code></pre>
  
  <p>Or, so I thought: it works in Firefox (my dev environment), but not Chrome or Safari.  Why?</p>
  
  <p>I need this to work while preserving Bootstrap's stackable grid effects, and in the least hackish way possible.  I'd like to do this with pure CSS if possible.  </p>
  
  <p>I've read the other questions on this topic, but most of them are outdated, or only seem to work for controlling the height of the columns themselves.  </p>
  
  <p>Edit: @Blake's solution via directly styling the columns: <a href="http://jsfiddle.net/7q4xjs25/11/" rel="nofollow">http://jsfiddle.net/7q4xjs25/11/</a> </p>