Edit in JSFiddle

// The content takes up more height than the content container.
// So how tall is it?
$(".total-height").html( $('.content').outerHeight(true) );

// Collect the outerHeight of each item in the content container.
var combinedHeight = 0;
$('.content').children().each(function( index ) {
	combinedHeight += $(this).outerHeight(true);
});
$(".content-height").html( Math.ceil(combinedHeight) );

<div class="wrapper">
  <div class="titlebar">Height of content container: <span class="total-height"></span></div>
  <div class="content">
    <h3>Here is a header.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta massa eget neque placerat porta. Morbi ut nibh felis. Vestibulum non nunc vitae mi fermentum euismod. Etiam facilisis ligula purus. Donec eu condimentum justo, et pulvinar risus.
      Sed in leo tortor. Mauris ut erat augue. Quisque laoreet commodo pretium. Curabitur faucibus in metus vitae laoreet. Nulla lorem justo, sodales eget lacus et, congue condimentum ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet luctus magna.</p>

    <p>Curabitur diam libero, finibus at efficitur in, feugiat quis quam. Nullam rutrum est nisi, vitae fermentum urna rutrum sed. Ut et nibh nec nunc scelerisque viverra at ac augue. Sed gravida semper vulputate. In eleifend tincidunt felis vel viverra.
      Quisque posuere dapibus elit. Donec vitae imperdiet augue, eget consectetur libero. Nullam consectetur, tortor ac sagittis sagittis, massa nisl imperdiet mi, ac viverra metus ex eget ante. Maecenas pharetra commodo pellentesque. Aliquam ultricies
      tincidunt rutrum. Nunc elit metus, luctus vel leo quis, consequat volutpat eros. Curabitur dictum nisl at enim faucibus, congue auctor libero pellentesque. Morbi est mauris, maximus vitae pellentesque et, maximus et justo. Vivamus eget commodo libero,
      nec convallis lorem. Quisque finibus imperdiet pretium. Suspendisse felis lectus, dignissim quis porta a, dignissim sit amet nisl.</p>

    <p>Phasellus id lectus erat. Aenean ac ligula justo. Aliquam rhoncus eleifend nulla non ornare. Sed scelerisque porta mauris sit amet tincidunt. Pellentesque nec nibh id mauris egestas placerat eu ut ligula. Mauris tincidunt vel diam et fringilla. Praesent
      suscipit dignissim nunc, vitae consequat massa congue id. Ut egestas eleifend enim, sit amet tristique nulla ultricies vitae. Phasellus tincidunt nibh vitae eros rhoncus tristique. Pellentesque a enim nec turpis suscipit eleifend a vitae nisi. Cras
      condimentum est ex. Curabitur sagittis ipsum id dolor pulvinar, iaculis accumsan tortor pharetra. Donec porta tincidunt vestibulum. Morbi eget nisl at augue lobortis vulputate ac quis tortor.</p>

    <p>Suspendisse rutrum nec est eu ultrices. Aliquam lacinia ligula sem, vel laoreet sapien ultrices quis. Etiam in semper odio. Pellentesque lectus justo, faucibus non semper eget, placerat et nisl. Morbi hendrerit, est quis gravida consequat, dolor ante
      volutpat dui, vitae congue ex enim eget risus. Sed vehicula commodo nulla, id placerat arcu vehicula a. In iaculis rutrum risus, finibus fermentum eros dignissim sit amet. Curabitur eget velit ac orci viverra efficitur.</p>

    <p>Pellentesque a venenatis dolor. Suspendisse consectetur, ipsum nec tempor rutrum, nibh nisi eleifend dui, nec consectetur arcu ex quis elit. Maecenas tristique iaculis purus eu consequat. Nulla non arcu sit amet felis ullamcorper blandit. Nullam faucibus
      elit vel finibus porttitor. In hac habitasse platea dictumst. Morbi eget viverra mi, eget iaculis quam. Aenean tempus porta ligula in hendrerit. In a efficitur tellus.</p>
  </div>
  <div class="footer">Height of content: <span class="content-height">200px</span></div>
</div>

.wrapper,
.titlebar,
.content,
.footer {
  position: relative;
}

.titlebar,
.footer {
  padding: 10px;
  background: #aaa;
}

.wrapper {
  position: relative;
  background: #ddd;
  border: 1px solid #000;
  padding: 0;
  margin: 10px auto 5px;
  width: 500px;
  display: block;
  z-index: 1;
  overflow: hidden;
}

.content {
  min-height: 0px;
  max-height: 200px;
  padding: 10px;
  z-index: 1;
  overflow: scroll;
}

.footer {
  z-index: 2;
}
h3 {
  margin-top:0;
}