html—top and bottom property with dynamic size - html

Question

I have a div I'm trying to give specific properties to. My page has a header and a footer, and I want the body to consist of a panel with 15px padding all around, but the bottom padding always ends up variable. If the window is too tall, I end up with bottom padding that's 3–4x larger than the top and side padding, and if the window is too small, the footer overlaps the bottom of the panel. My html essentially looks like this:
<div class="container-fluid">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
I've tried giving #content the following style:
position: fixed;
top: 15px;
bottom: 15px
hoping that I could get a constant border all around, but when I have both top and bottom properties, top just overrides bottom and I still have that variable padding on the bottom. Any ideas?
For further clarification, see jsfiddle here. Notice that when you drag the divider above Result, the lower border moves up or down at about half the speed you're moving your cursor—I want to make it so the bottom of the panel stays a constant distance from the bottom of the window.
Thanks!

Answer 1

It's easiest to just introduce a wrapper to avoid stomping on Bootstrap styles.
<div class="container-fluid">
<div class="my-wrapper">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
And:
.my-wrapper{padding:15px;}
JSFiddle