Vertical navigation expand to the whole height of the page

Question

I've created this vertical small navigation and I'd like the navigation bar expand to the whole height of the web page. This is my HTML:

    <section class="main" role="main vastuvõtt">
  <div class="container">
    <aside class="sidenav">
      <div class="four columns">
        <ul>
          <li><a href="#">Erialad</a></li>
          <li><a href="#">Vastuvõtt</a></li>
          <li><a href="#">Õppetöö</a></li>
        </ul>
      </div>
      <!--end four columns--> 
    </aside>
    <!--end sidenav-->

    <section class="content">
      <div class="twelve columns">
        <h1>Vastuvõtt</h1>
        <p>Ettevalmistusosakonda oodatakse <strong>6-7 aastaseid</strong> muusikahuvilisi lapsi. Avaldusi ettevalmistusosakonda võetakse vastu 27. septembrini 2013. Võimaluse korral saab liituda aastaringselt. Õppetöö kestab oktoobrist aprilli lõpuni. Traditsiooniliselt avatakse ka vene õppekeelega rühm.<img src="images/IMG_4956.jpg" class="scale-with-grid vastuvott" alt="Vastuvõtt"/><br/ >
          <br/ >
          Põhiõppesse võetakse õppima muusikahuvilisi kooliealisi lapsi. Võimalikud on ka erandid - puhkpille, löökpille, akordioni, tsellot ja kitarri on võimalik õppima asuda 9-13 aastaselt.<br/ >
          <br/ >
          Järgmised musikaalsuskatsed põhiosakonda toimuvad <strong>mais 2014</strong>. Sellele eelneb 2 konsultatsiooni.<br/ >
          <br/ >
          Kooli astumiseks peab kandidaat läbima musikaalsuskatsed, kus kontrollitakse:
        <ul>
          <li><span class="bullet">*</span> kuulmist</li>
          <li><span class="bullet">*</span> viisipidamist</li>
          <li><span class="bullet">*</span> muusikalist mälu</li>
          <li><span class="bullet">*</span> rütmitunnet</li>
          <li><span class="bullet">*</span> harmooniataju</li>
        </ul>
        </p>
        <p>Kandidaat peab omalt poolt <strong>ette valmistama</strong> ühe temale meelepärase laulu (vt. <a href="#">palad1</a>, <a href="#">palad2</a>, <a href="#">palad3</a>), mille ta komisjonile esitab. Konsultatsioonides õpitakse veel teinegi lihtne lauluke, mille meeldejätmine tõendab muusikalise mälu olemasolu.
          Muud muusikalist ettevalmistust sisseastuja ei vaja, piisab kooli poolt korraldatud kahest konsultatsioonist, mida viivad läbi samad õpetajad, kes sisseastumiskatsetel lapsega tegelevad.<br/ >
          <br/ >
          Ettevalmistusosakonda astujaile musikaalsuskatseid ei korraldata, piisab vaid 6-7-aastase lapse vanema avaldusest. Kandidaatide sobivus pilliõppimiseks, musikaalsus ja arenemisvõime tehakse kindlaks aastase õppeaja vältel. Aasta lõpul tehakse läbitud materjali piires vastav test, mille tulemusel otsustatakse põhiosakonda vastuvõtmine.<br/ >
          <br/ >
          Rütmimuusikaosakonda astuja peab olema eelnevalt lõpetanud muusikakooli noorema astme.</p>
      </div>
      <!--end twelve columns--> 
    </section>
  <!--end content-->
    </div>
  <!--end container--> 
</section>
<!--end main-->

And this is my CSS where I tried to control the height with 100%, but it's not working:

/*sidenav styles*/
.sidenav .four.columns { 
    background: url(../images/bg_footer.png) repeat rgb(153,204,25);
    height: 100%;
}
.sidenav .four.columns ul,
.sidenav .four.columns ul li
{
    margin: 0px;
}
.sidenav .four.columns ul li a
{
    display: block;
    line-height: 49px;
    padding: 0 14px;
    color: rgb(245,233,227);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.08em;
}
.sidenav .four.columns ul li a:hover
{
    border-bottom: none;
    background: rgb(186,230,78);
    cursor: pointer;
}

Please help me to solve this. Thank you in advance.

Demo

Answer 1

Your menu has to have fixed position and defined width. And your content has to have margin left attribute that equals or greater then menu width

/*sidenav styles*/
.sidenav .four.columns { 
    background: url(../images/bg_footer.png) repeat rgb(153,204,25);
    height: 100%;
    position:fixed;
    width:170px;
}

.content
{
    display:inline-block;
    margin-left:180px;
}

Fiddle

Answer 2

100% of what? You need to make the parent elements 100% as well, add the below snippet in your CSS

html, body, .sidenav {
    height: 100%;
}

Demo