Skip to content

Instantly share code, notes, and snippets.

@johnmorris
Created September 11, 2015 18:27
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 johnmorris/2fcdced608ea814f51c1 to your computer and use it in GitHub Desktop.
Save johnmorris/2fcdced608ea814f51c1 to your computer and use it in GitHub Desktop.
Set DIV height to 100% of parent using jQuery
<!DOCTYPE html>
<html>
<head>
<title>jQuery DIV 100% Height of Container</title>
<style>
.container {
overflow: hidden;
border: 1px solid red;
}
.left, .right {
border: 1px solid #000;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Get the height of our container
var container_height = $('.container').height();
// Set target DIVs height to container height
$(".left, .right").height(container_height);
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<p>One paragraph of text. This is the shorter div.</p>
</div>
<div class="right">
<p>Multiple</p>
<p>Paragraphs</p>
<p>Of</p>
<p>Text</p>
<p>This is the longer div.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment