CSS Sticky Footer - Getting content border to extend to the footer

Question

I know that there are tons of questions about this but I've been searching Google for 4 days now and nothing is seeming to work for me. I'm trying to implement a sticky footer - meaning that when there is not enough content to fill the screen, the footer is at the bottom of the screen and when there is enough content to fill the screen, the footer stays below that content and you scroll down.

I have tryed roughly 15 different sticky footer solutions and while most of them work in theory, my particular situation keeps messing it up my content has borders on the left and right that should extend down to the footer. Anything involving push won't work.

Here is the most recent incarnation of what I've tried:

HTML

<div id="container">

  <div id="header">
    <!--Banner goes here-->
    <div id="nav">Navigation Links</div>
  </div>

  <div id="content">
    <p>Content Goes Here</p>
  </div>

  <div id="footer">
  </div>

</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

#container {
  min-height: 100%;
  position: relative;
}

#content {
  padding: 20px;
  border-left: solid 30px lightblue;
  border-right: solid 30px lightblue;
}


#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  border-top: solid;
  text-align: center;
  padding-top: 10px;

}

How do I get this sticky footer to work while also getting those blue borders to extend down to the footer?

Answer 1

Here's a solution that uses box-shadow to create the "border:" http://jsfiddle.net/FT8KR/. The pixel values were rather arbitrary, so play with those. Border can also be used, but it pushes the scroll bar more inwards, whereas box-shadow naturally does not.

#container {
    height: 100%;
    margin: 0 auto -80px;
    overflow: auto;
    padding-bottom: 80px;
    padding: 0 30px;
    box-shadow: inset -48px 0 0 lightblue,
                inset 30px 0 0 lightblue;
}