div에 세로 탐색 막대를 맞추려면 어떻게해야합니까?

Question

300px 높이의 div가 있습니다. div 안에 세로 탐색 모음을 만들려고합니다. 나는 모든 li을 div 내에서 균등하게 나누고 싶다. 나는 height = auto를 사용했지만 작동하지 않습니다. 나는 몇몇 기사를 읽고 그들은 나가 가지고있는 연결의 양에 의하여 고도를 분할하는 추천한다. 그것이 올바른 해결책인지 나는 모른다. 아무도 제발 도와 드릴까요 ???

<div id="menu"> <!--Menus starts here--> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Stuff1</a></li> 
         <li><a href="#">Stuff2</a></li> 
         <li><a href="#">Stuff3</a></li> 
         <li><a href="#">Stuff4</a></li> 
        </ul> 
       </div> <!--End of verrical menu here--> 


/*the menu starts here*/ 
#menu{ 
    background-color: yellow; 
    max-width: 100%; 
    height: 300px; 
    margin: 0 auto; 


} 
#menu ul{ 
    width: 95%; 
    height: 300px; 
    background-color: purple; 
    display: block; 
    margin: 0; 
    padding: 0; 

} 

#menu li{ 
list-style: none; 
display: block; 
width: 100%; 
height: auto; 

color:#fffafa; 
font-family: helvetica; 
font-size: 20px; 
padding: 20px; 
text-align: center; 
border:2px solid black; 
} 

#menu li:hover{ 
    background-color: #ff4500; 
    width: 90%; 
} 

#menu li{ 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -ms-transition:all .9s ease; 
    transition:all .9s ease; 
} /*end of the menu goes here*/ 

Answer 1

5 개의 항목을 사용하는 경우 li의 높이를 수동으로 설정해야합니다.

li { 
height: 20%; 
} 

Answer 2

u가 더 많은 li 태그를 갖고 싶다면 메뉴가 300px로 유지되거나 u가 변경 될 수 있으며 메뉴 높이가 jquery입니다. 여기에서 볼 수 있습니다 : http://jsfiddle.net/j3TU3/

$(document).ready(function(){ 
    var a=+$("#menu").height(); 
    var c=$("li").length; 
    var aa=(a/c)-4; 
    $("li").css({"height":aa}); 
});