cssgrid
cssgrid copied to clipboard
Equal height columns
I've tried the most common techniques for achieving equal height columns (with differing content) but can't seem to get it working. I mean equal as in all columns in a row being the same height as the tallest one, not simulating it with background color or something like that. Anyone have some ideas on how to get it working specifically with the 1140px grid system?
Hi, i found jQuery solution made by Steven Akins, modified by unknown, and little tuned by myself.
You need only to set class for resized divs ("yourresizeddiv" in script, adjustable).
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
el.height(newHeight);
}
function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}
function columnConform() {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = [],
elements = $('div.yourresizeddiv');
// first remove originalHeight data and reset height
elements.removeData('originalHeight').height('auto');
// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
elements.each(function() {
var $this = $(this);
if(currentRowStart != $this.position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++)
setConformingHeight(rowDivs[currentDiv], currentTallest);
// set the variables for the new row
rowDivs = []; // empty the array
currentRowStart = $this.position().top;
currentTallest = getOriginalHeight($this);
rowDivs.push($this);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($this);
currentTallest = (currentTallest < getOriginalHeight($this)) ? (getOriginalHeight($this)) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++)
setConformingHeight(rowDivs[currentDiv], currentTallest);
});
}
$(window).resize(function() {
columnConform();
});
and at the bottom of document:
$(window).load(function() { columnConform(); });