Equal height of child divs in Bootstrap columns -

Question

FIDDLE

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 child divs also be the same height.

After cobbling together answers from several different questions, I finally managed to get this to work by using a combination of table-cell and setting the height of everything to 100%:

@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; 
}

Or, so I thought: it works in Firefox (my dev environment), but not Chrome or Safari. Why?

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.

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.

Edit: @Blake's solution via directly styling the columns: http://jsfiddle.net/7q4xjs25/11/

Answer 1

An element that displays as a table-row expects it's parent to behave as a table. In-fact, having the parent element set to display: table; is what will enable this context for it's children. You don't actually need a table-row element, so you can just change your declaration to :

.row {
    display: table;
    min-height: 100%;
    height: 100%;
}

This should cause the elements to behave as you expected!

As an update to address your comment about heights, you can actually remove all of the height: 100% and min-height: 100% rules.. if they are not present, the table-cell elements will all share the height of the tallest content.

However, some of your other styles do seem to rely on these rules, so you may need to do a bit of tweaking. While the column elements will now be sized by content, the .papers elements within them will not be (because their parent no longer has a set height that it can fill).. and since these elements are the ones that are visually styled it will look like you've lost the benefits of the previous display: table change. To get around this, you will want to make sure that the visually styled elements are the ones that have display: table-cell on them. This could mean moving the class of papers up onto the column elements, and then working from there to get your spacing back, or you could approach it differently still.

I hope that helps!