Equal height

by Jan Hjørdie

HTML

<div class="row">
    <div class="col">
        <div class="widget">Widget</div>
        <div class="vertical"></div>
    </div>
    <div class="col">More lines
        <br>More lines
        <br>More lines
        <br>More lines
        <br>More lines
        <br>More lines
        <br>More lines
        <br>More lines
        <br>
    </div>
</div>

SCSS

html, body {height: 100%; min-height: 100%; border:0; margin:0; padding:0;}

.row .col {
    float:left;
    width:50%;
   
    
    .widget {
        border-right: 1px solid red;
           height:100%;
    }
    
    .vertical {
        border-right: 1px solid red;
        height:100%;
      
        right:0px;
    }
   
}

JavaScript

// "JAN"

equalheight = function (container) {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function () {

        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}

$(window).load(function () {
    equalheight('.row .col');
});


$(window).resize(function () {
    equalheight('.row .col');
});