HTML5/CSS Как закодировать высоту боковой панели, чтобы автоматически соответствовать высоте обертки?

Question

У меня есть код боковой строки (#leftcolumn), написанный в CSS и HTML. Кажется, я не могу соответствовать высоте обертки. Я до сих пор пробовал position:absolute; и все, но это не помогло. Есть другие методы, которые я пробовал, но они не работают. Боковая панель показывает небольшую область.

Кодекс:

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; 
 
} \t 
 
nav ul { 
 
    list-style-type: none; 
 
} 
 
nav a { 
 
    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>

Answer 1

Вот jsfiddle, который показывает код с полной высотой "leftcolumn". Я добавил обертку и сделал ее абсолютно позиционированной, «leftcolumn» имеет высоту 100%.

JSFiddle

Вот 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> 

И вот 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 a { 
    text-decoration: none; 
} 

Answer 2

попробовать этот jsfiddle

CSS

#leftcolumn { 
    position: absolute; 
    width: 150px; 
    height: 100%; 
    background-color: #dfbf9f; 
    left: 0; 
    top: 0; 
}