Skip to content

Instantly share code, notes, and snippets.

@gmelikov
Last active April 13, 2017 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gmelikov/b3eb483b8f4bf6321310a8f8455ef258 to your computer and use it in GitHub Desktop.
Save gmelikov/b3eb483b8f4bf6321310a8f8455ef258 to your computer and use it in GitHub Desktop.
js function - Make inline divs the same height and fill it.
/**
* Make inline divs the same height and fill it.
* @param {string} container - selector string of parent container.
* @param {string} [blocktobottom] - selector string of object to fill height.
*/
equalheight = function(container, blocktobottom) {
function fillinside($el, currentTallest, blocktobottom) {
if (typeof blocktobottom !== 'undefined' && $el.height() < currentTallest) {
$el.find(blocktobottom).css('padding-top', ((currentTallest - $el.height()) + parseInt($el.find(blocktobottom).css('padding-top'), 10)));
}
}
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++) {
fillinside(rowDivs[currentDiv], currentTallest, blocktobottom);
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++) {
fillinside(rowDivs[currentDiv], currentTallest, blocktobottom);
rowDivs[currentDiv].height(currentTallest);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment