HTML5/CSS 래퍼 높이와 자동으로 일치하도록 사이드 바 높이를 코딩하는 방법은 무엇입니까?

Question

CSS와 HTML로 작성된 사이드 바 코드 (#leftcolumn)가 있습니다. 래퍼 높이와 일치하지 않는 것 같습니다. 나는 지금까지 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

는 전체 높이 "leftcolumn"와 코드를 보여줍니다 jsfiddle이다. 래퍼를 추가하고 절대적으로 위치를 지정했습니다. "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; 
}