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

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

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

---

100%

什么？您还需要将父元素

100%

添加到CSS中

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

---

100%

什么？您还需要将父元素

100%

添加到CSS中

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

---

您的菜单必须具有固定的位置和定义的宽度。 并且您的内容必须具有等于或大于菜单宽度的左边距属性

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

---

您的菜单必须具有固定的位置和定义的宽度。 并且您的内容必须具有等于或大于菜单宽度的左边距属性

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

---

100%制作所有容器100%制作所有容器谢谢你，外星人先生。不幸的是，这不起作用。我编辑了我原来的帖子。如果你能看看HTML部分，也许你能帮我多一点。这里还有一个指向我正在处理的网页的链接：。@JuhanTeppan很抱歉这么说，但是布局很混乱，位置从一开始就出现了错误，因此发现很难修复，通常，在这种情况下，您可以将元素包装在

位置：relative容器且小于
位置：绝对值您想要的元素
100%
height，然后简单地分配
height:100%位置：relative容器且小于
位置：绝对值您想要的元素
100%
height，然后简单地分配
height:100%