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

Answer 2

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

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

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

2 个答案: