坚固的等高柱

Posted 2021-02-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了坚固的等高柱相关的知识，希望对你有一定的参考价值。

Dynamic equal height columns that account for padding and borders.

//Dynamic Equal Height Columns *Pure JS
function eqHeight(parent_id) {
	var child = document.getElementById(parent_id).childNodes, childAmount = child.length, boxHeight = 0;
    // Find the greatest height
	for(var i = childAmount - 1; i >= 0; i--) { 	
        if(child[i].offsetHeight && child[i].offsetHeight > boxHeight) {
            child[i].style.height = '';
            boxHeight = child[i].offsetHeight;
        }
	}
	// Apply the greatest height to all child elements while accounting for padding and borders
	for(var i = childAmount - 1; i >= 0; i--) { 	
		if(child[i].offsetHeight) {
			child[i].style.height = boxHeight + 'px';
		}
        if(child[i].offsetHeight > boxHeight) {
            child[i].style.height = boxHeight - (child[i].offsetHeight - child[i].clientHeight) + 'px';
            child[i].style.height = boxHeight - ((child[i].offsetHeight - boxHeight) + (child[i].offsetHeight - child[i].clientHeight)) + 'px';
        }
	}
}
window.onload = function() { eqHeight('object_group'); }
window.onresize = function() { eqHeight('object_group'); }

以上是关于坚固的等高柱的主要内容，如果未能解决你的问题，请参考以下文章