html - HTML5 / CSS How to code a Side Bar height to automatically match a wrapper height? -

i have sidebar code (#leftcolumn) written in css , html. can't seem match wrapper height. have far tried position:absolute; , doesn't help. there othr methods have tried non of seems work. sidebar keeps showing small area.

the code:

body {    font-family:verdana, arial, sans-serif;    background-color: #f2eab7;  }  #wrapper {    background-color: #ffffff;     width: 80%;    margin: 0 auto -40px;    height: auto;    height: 100%;    min-width:850px;    position: relative;  }   #leftcolumn {    float: left;    width: 150px;    height: auto;    background-color: #dfbf9f;  }  #rightcolumn {    margin-left: 155px;    background-color: #ffffff;    color: #000000;  }   header {    background-image:url("javalogo.gif");    background-position: center;    background-repeat: no-repeat;    background-color:#ccaa66;    height: 100px;    padding: 10px 10px 10px 155px;  }  h2 {    color: #869dc7;     font-family: arial, sans-serif;  }  .content {    padding: 20px 20px 0 20px;   }   #floatright {    margin: 10px;    float: right;    overflow: hidden;  }  footer {    font-size:70%;    text-align: center;    padding-top:20px;    padding-bottom:20px;    background-color:#ccaa66;    background-position: center;  }	  nav ul {    list-style-type: none;  }  nav {    text-decoration: none;  }

<div id="wrapper">    <header></header>    <div id="leftcolumn">      <nav>        <ul>          <li><a href="index.html">home</a></li>          <li><a href="rooms.html">menu</a></li>          <li><a href="directions.html">directions</a></li>          <li><a href="contact.html">contact</a></li>        </ul>      </nav>    </div>    <footer>copyright &copy; 2014</footer>  </div>

here jsfiddle shows code full height "leftcolumn". i've added wrapper , made absolutely positioned, "leftcolumn" has height of 100%.

jsfiddle

here's html:

<div id="wrapper">     <div id="leftcolumn">         <nav>             <ul>                 <li><a href="index.html">home</a></li>                 <li><a href="rooms.html">menu</a></li>                 <li><a href="directions.html">directions</a></li>                 <li><a href="contact.html">contact</a></li>             </ul>         </nav>     </div> </div> 

and here's css:

body {     font-family:verdana, arial, sans-serif;     background-color: #f2eab7; }  #wrapper {     background-color: #ffffff;      width: 80%;     margin: 0 auto -40px;     padding: 0;     height: 100%;     min-width:850px;     position: fixed; }   #leftcolumn {     float: left;     width: 150px;     height: 100%;     background-color: #dfbf9f; }  nav ul {     list-style-type: none; }  nav {     text-decoration: none; }