fixed header div with scrollable div below

Question

I'm trying to place two divs one above the other. The top one has a fixed size. The bottom one needs to fill the rest of the page height, without making the page higher if it's content is too big.

<div id="content">
    <div id="top-padding"></div>
    <div id="stuff">
        some content
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        End of content.
    </div>
</div><!-- content -->

My attempt so far is: http://jsfiddle.net/b4fEE/

The problem I have is that the green div is too big. I need as way to specify it's height as

100% - 30px

I'd prefer to do this in pure css, but I will resort to javascript/jquery if necessary.

Answer 1

Try this:

#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}

Working Fiddle

Answer 2

In case if anyone wants to solve this keeping things in normal flow, nowadays this can be done using the flexbox layout model as shown below:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#content {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  background-color: #C9E6FF;
}
#top-padding {
  height: 30px;
  flex: none;
  background: blue;
}
#stuff {
  flex: auto;
  overflow-y: auto;
  background-color: lightgreen;
}
/*for demo purpose */

#stuff p {
  height: 1000px;
}

<div id="content">
  <div id="top-padding"></div>
  <div id="stuff">
    <p>some content</p>
  </div>
</div>

Answer 3

And in case if anyone wants to solve this keeping things in normal flow and without using flex, then solution is as follows:

html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    #content {
        height: 100vh;
        position: relative;
        background-color: #C9E6FF;
        margin: 0 auto;
        width: 300px;
    }

    #top-padding {
        background: blue;
        height: 30px;
    }

    #stuff {
        overflow-x:auto;
        background-color: lightgreen;
        height: calc(100vh - 30px);
    }

<div id="content">
    <div id="top-padding"></div>
        <div id="stuff">
            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
       </div>
   </div>