html - 垂直导航扩展到页面的整个高度

Question

我创建了这个垂直的小导航，我希望导航栏扩展到网页的整个高度。这是我的 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-->

这是我的 CSS，我试图用 100% 控制高度，但它不起作用:

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

请帮我解决这个问题。提前谢谢你。

Demo

Answer 1

100% 什么？您还需要使父元素 100%，在您的 CSS 中添加以下代码段

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

Demo