100% floating div in height: auto parent

I have a CSS layout with a sticky footer. The main parts of the site are some sidebars and a content box. But I can't get the context box or the surrounding div to expand to the "100%" height.

If the content field contains short text, it doesn't extend to full height and if it contains a lot of text, the surrounding div doesn't.

The result should be a site where the content box AND the floating background extend to the bottom of the page just above the footer.

edit: adding "overflow: hidden" to #inner fixes the issue where the background doesn't line up with long content. But I still can't get the #content div to expand for the full page height.

http://jsfiddle.net/s6yf3/ (Wikipedia logo is for better visualization only)

<div id="wrapper">
  <div id="inner">   
    <header>
      <a href="#">
        <img src="//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Logo" width=400 height=100 />
      </a>
      <nav>
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
        </ul>
      </nav>
    </header>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec libero vitae massa bibendum molestie ac non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent in dui arcu, nec ornare nibh.
    </div>
    <div id="sidebar">
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
    </div>
  </div>
</div>
<div id="footer">
  <p>Sticky Footer</p>
</div>

      

        
        
        
      

    

body {
  margin:0;
  padding:0;
  background:#eee;
}

html,body {
  height:100%; 
}

#wrapper {
  width:400px;
  height: auto !important;
  height:100%;
  margin:0 auto;
  min-height:100%;
}

#inner {
  height: 100%;
  padding:0 0 55px 0;
  background-color: #ccc;
  background-image: url(//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png);
  background-repeat: repeat-x;
  background-position: right bottom;
  overflow: hidden;
}

#inner p {
  margin:1em 1em 0;
  padding:.15em .25em;  
}

#inner header {
  margin: 0; 
  padding: 0;
  height: 160px;
}

#wrapper header nav ul {
  list-style-type: none;
  margin-top: 4px;
  padding-left: 240px;
  height: 46px !important;
  z-index: 999;
  position: absolute;
}

#wrapper header nav ul li {
  display: inline-block;
}

#wrapper header nav ul li a {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  height: 40px !important;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  display: block;
}

#wrapper header nav ul li a:hover {
  background-color: #333 !important;
  color: #fff;
  z-index: 2;
}

#wrapper header nav ul li.active a {
  font-size: 18px;
  font-weight: bold;
  background-color: #333 !important;
  color: #fff;
  height: 46px !important;
  line-height: 46px;
  display: block !important;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
}

#sidebar div {
  width: 100px;
  min-height: 60px;
  background-color: #ddd;
  margin-bottom: 20px;
}

#content {
  width: 250px;
  height: 100%;
  position: relative;
  float: right;
  background-color: #ddd;
}

#footer {
    width:400px;
    height:55px;
    margin:-55px auto 0;
    background:#222;
    overflow:hidden;
}

#footer p{
    margin:0;
    padding:.5em 0 0;
    font-weight:bold;
    text-align:center;
    color:#FFF;
}