​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
  #resizeMe {
6
    background: gold;
7
    width: 180px;
8
    height: 220px;
9
    margin: 7px;
10
    padding: 10px;
11
    border: 5px solid black;
12
    overflow: auto;
13
    resize: both;
14
  }
15
</style>
16
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
17
<script>
18
  $( function() {
19
    $( "button" ).click( function() {
20
      var msg = "";
21
      msg = msg + "<p>Inner Width: " + $( "#resizeMe" ).innerWidth();
22
      msg = msg + "<p>Inner Height: " + $( "#resizeMe" ).innerHeight();
23
      msg = msg + "<p>Resize me, then 'Get Dimensions' again...";
24
      $("#resizeMe").prepend(msg);
25
    });
26
  });
27
</script>
28
​
29
<button>Get Dimensions</button>
30
<p>Includes padding (but not margins and borders).</p>
31
<div id="resizeMe">
32
</div>