Skip to content

Instantly share code, notes, and snippets.

@lancevo

lancevo/demo.html

Last active August 29, 2015 14:09
Show Gist options
  • Save lancevo/475289d04384fc9f31af to your computer and use it in GitHub Desktop.
Save lancevo/475289d04384fc9f31af to your computer and use it in GitHub Desktop.
Download ZIP
equalHeight jquery plug-in
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div { width:150px;border:10px solid #ccc;
display:inline-block;
background:cyan;
vertical-align:top}
div:nth-child(2n+1) {
background:green;
border:none;
}
</style>
</head>
<body>
<div style="height:150px;">dw</div>
<div style="height:10px;">dw</div>
<div style="height:80px;">xxx <br>dwdwdwdwdw</div>
<script>
$().ready(function(){
equalHeight($('div'));
});
function equalHeight(containers) {
var maxHeight = 0;
$(containers).each(function () {
$el = $(this);
maxHeight = $el.height() > maxHeight ? $el.height() : maxHeight;
}).outerHeight(maxHeight);
}
</script>
</body>
</html>
Raw
equalheight.js
/*
set all the containers to the same height
https://gist.github.com/lancevo/475289d04384fc9f31af/
var containers = $('div');
equalHeight(containers);
*/
function equalHeight(containers) {
var maxHeight = 0;
$(containers).each(function () {
$el = $(this);
maxHeight = $el.height() > maxHeight ? $el.height() : maxHeight;
}).outerHeight(maxHeight);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment