title: Padding at the bottom of a scrolling column with a fixed-width header
body: <p>So I have a webpage with a column.  The column has a fixed header up top, and a large scrolling body section, and the HTML/CSS below works fine for this.</p>
  
  <p><em>The problem</em>: I want to add padding to the bottom of the body, so if you scroll all the way down, you get some whitespace instead of having everything jammed right up to the bottom edge.  Adding <code>padding-bottom: 50px</code> to <code>.body</code> works perfectly in Chrome; however, in Firefox, it appears that using the <code>bottom</code> property means that <code>padding-bottom</code> is ignored.  If you drop <code>bottom</code>, the padding appears, but the scrollbar disappears.</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;link type="text/css" rel="stylesheet" media="all" href="/test.css"&gt;
  &lt;div class="column"&gt;
    &lt;div class="header"&gt;
      Fixed header
    &lt;/div&gt;
    &lt;div class="body"&gt;
      &lt;h1&gt;Body&lt;/h1&gt;
      Where's the bottom padding?
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>test.css</strong></p>
  
  <pre><code>.column {
    position: absolute;
    height: 100px;
    width: 100%;
    background-color: green;
  }
  
  .header {
    position: absolute;
    height: 30px;
    background-color: red;
  }
  
  .body {
    position: absolute;
    top: 30px;
    bottom: 0;
    overflow-y: auto;
    background-color: blue;
    padding-bottom: 50px;  /* Broken in Firefox */
  }
  </code></pre>
  
  <p>JSFiddle for the above: <a href="http://jsfiddle.net/jpatokal/PBwVa/" rel="nofollow">http://jsfiddle.net/jpatokal/PBwVa/</a></p>
  
  <p>Is there a way around this?  The one workaround I came up with was using a string of <code>:last-child</code> selectors to add padding to the very last element within <code>.body</code> instead, but, eww.</p>