jQuery outerHeight Method

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo example</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
 </script>
<script type="text/javascript">
         $(document).ready(function(){ 
              $( "#heightExample" ).on( "click", function(event) {             
                  var x = $("#myDiv").outerHeight();       
                          $("#myDiv > p").html("Outer Height = "+x+"px");     
              });  
          });
</script>
<style>
.myClass{
border:4px solid red;
background:yellow;
width:400px;
height:300px;
padding:10px;
}
</style>

</head>	
<body>
<h4 ><a href="javascript:void(0);" id="heightExample">Click to run .innerHeight() Example </a></h4> 

<div id="myDiv" class="myClass">
<------Height = 300px----->

<p>
Demo Div..
</p>
</div>



</body>
</html>