Resizeable

by smacky311

HTML

<div id="output"></div>

<div id="sample" class="sampleClass">
<h1>
Header
</h1>
<div class="scrollable">
  <div>hello</div>
  <div>hello</div>  
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  </div>
  <footer>Footer</footer>
</div>

CSS

.sampleClass {
 padding: 0;
 border: solid blue;
 position: absolute;
 top: 10px;
 right: 10px;
 left: 10px;
 bottom: 10px;
 height: auto;
 min-height: 120px;
}
.scrollable{
  overflow-y: auto;
  border: 1px solid red;
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  bottom: 36px;
}
h1{
  font-size: 21px;
  padding: 10px;
}
footer{
    font-size: 16px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    display: block;
    padding: 0 12px;
    position: absolute;
    bottom: 0;
    
}