Question

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.

The problem: 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 padding-bottom: 50px to .body works perfectly in Chrome; however, in Firefox, it appears that using the bottom property means that padding-bottom is ignored. If you drop bottom, the padding appears, but the scrollbar disappears.

test.html

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <h1>Body</h1>
    Where's the bottom padding?
  </div>
</div>

test.css

.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 */
}

JSFiddle for the above: http://jsfiddle.net/jpatokal/PBwVa/

Is there a way around this? The one workaround I came up with was using a string of :last-child selectors to add padding to the very last element within .body instead, but, eww.

Answer 1

Adding a inner div inside the div.body with a margin-bottom seems to work in your jsfiddle.

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <div class="inner">
      <h1>Body</h1>
        Where's the bottom padding?
    </div> 
  </div>
</div>

and the (extra) css:

.body .inner {
  margin-bottom: 30px;
}