Skip to content

Instantly share code, notes, and snippets.

@dlucero23

dlucero23/equalheightcolumnscript.js

Last active April 11, 2016 15:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dlucero23/b3d6ef6501f8d7d4b9ad969bc8e6ad7d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dlucero23/b3d6ef6501f8d7d4b9ad969bc8e6ad7d to your computer and use it in GitHub Desktop.
Download ZIP
JS script: create equal height columns. Needs class or id set
Raw
equalheightcolumnscript.js
var getMaxHeight = function ($elms) {
var maxHeight = 0;
$elms.each(function () {
var height = $(this).height();
if (height > maxHeight) {
maxHeight = height;
}
});
return maxHeight;
};
$('div').height( getMaxHeight($('div')) );
Raw
style.css
div {
float: left;
width: 100px;
border: 1px solid black;
padding: 1em;
margin-right: .5em;
}
Raw
template.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment