Scrollable div without fixed height not working

Question

I need to get the scrollable div some height without fixed height.

FIDDLE: http://jsfiddle.net/Msy4E/1/

HTML:

<div class="lower-content">
            <div class="col-1">
                <h2><strong>Sales Calendar</strong></h2>
                <div class="scrollbox">
                    <h4>FEBRUARY</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Fri-Mon, Feb 14-17</span><br />
                    <h4>MARCH - APRIL</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Mar 15-Apr 19</span><br />
                    <h4>MAY</h4>
                    <span>Memorial Day Weekend Sale</span><br />
                    <span>Fri-Mon, May 23-26</span><br />
                    <h4>JUNE</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>June 1-30</span><br />
                    <h4>JULY</h4>
                    <span>July 4th Summer Sale</span><br />
                    <span>Thu-Sun, July 3-6</span><br />
                    <h4>AUGUST</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Aug 1-31</span><br />
                    <h4>SEPTEMBER</h4>
                    <span>Labor Day Weekend Sale</span><br />
                    <span>Fri-Mon, Aug 29-Sept 1</span><br />
                    <span>Presidents' Day Sale</span><br />
                    <span>Sept 15-Oct 25</span><br />
                    <h4>OCTOBER</h4>
                    <span>Columbus Day Sale</span><br />
                    <span>Fri-Mon, Oct 10 - 13</span><br />
                    <h4>NOVEMBER</h4>
                    <span>Presidents' Day Sale Holiday Preview</span><br />
                    <span>Nov 1-20</span><br />
                    <span>Black Friday Preview Days</span><br />
                    <span>Sat-Wed, Nov 22-26</span><br />
                    <span>After-Thanksgiving Sale</span><br />
                    <span>Thu-Sun, Nov 27-30</span><br />
                    <h4>DECEMBER</h4>
                    <span>Last Minute Style Deals</span><br />
                    <span>Dec 14-25</span><br />
                    <span>After-Holiday Sales</span><br />
                    <span>Fri, Dec 26 - Fri, Jan 2</span><br /><br />
               </div>
            </div>
  </div>

CSS:

  .lower-content {
      border-top: 1px solid #b2b2b2;
      margin: 1% auto 0;
       padding: 1% 0 0;
      width: 1200px;
  }

  .lower-content .col-1 {
     height: 100%;
     position: relative;
     width: 27%;
  }
  .lower-content .col-1 .scrollbox {
      font-size: 1.2em;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: auto;
  }

Answer 1

The .scrollbox apparently has the same size as its parent, .col-1 because it is positioned absolutely with top, right, bottom and left values of 0.
In a fork of your fiddle (http://jsfiddle.net/NLkGp/), I added a red border on .col-1 and a green border on .scrollbox and you see that they have the same size.

When your intention was that the scroll box uses all of the available space from the window top to its bottom, you have to make sure that the parent element uses all of the available space.
An easy solution would be to add a dedicated height to .col-1, e.g. height: 400px instead of height: 100%.

(A relative height always uses as reference the height of its content, which is the heading only, since the scroll box has an absolute positioning.)

Answer 2

You could use padding-bottom:100% if I understand your question correctly

http://jsfiddle.net/Msy4E/3/

.lower-content {
  border-top: 1px solid #b2b2b2;
  margin: 1% auto 0;
  padding: 1% 0 0;
  width: 1200px;
}

.lower-content .col-1 {
  height: 100%;
  position: relative;
  width: 27%;
  padding-bottom:100%;
  background:lightgray;
}
.lower-content .col-1 .scrollbox {
  font-size: 1.2em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

Answer 3

Simply try setting the .scrollbox to height 100%? This will likely do the trick as it should expand to fill it's parent, .col-1

height: 100%;