div 요소가 자랄 수 없습니다

Question

요소를 동적으로 추가하는이 메뉴를 작성했지만 요소를 추가 한 후에 div가 성장하지 않습니다.

#frstMenu 
{ 
    position:absolute; 
    top:1.5%; 
    right:1%; 
    width:23%; 
    height:70%; 
    background:rgba(0,0,0,0.6); 
    border-radius: 5px; 
    box-shadow: 0 1px 0 rgba(0,0,0,0.2); 
    cursor: pointer; 
    outline: none; 
    padding-top:1%; 
    overflow:hidden; 
    z-index:2; 
} 

.menulist1{ 
    position:absolute; 
    width:100%; 
    height:15$; 
    top:0%; 
    right:0%; 
    dispaly:none; 
    text-decoration: none; 
    color: #333; 
    clear:both; 
    border-bottom: 1px solid #e6e8ea; 
    z-index:2; 
} 

#menulist 
{ 
    position:absolute; 
    top: 100%; 
    right: 1%; 
    width:23%; 
    height:500%; 
    background: #fff; 
    border-radius: 0 0 5px 5px; 
    border: 1px solid rgba(0,0,0,0.2); 
    border-top: none; 
    border-bottom: none; 
    list-style: none; 
    z-index:1; 
} 

HTML :

> <div id="firstMenuList"> 
>   <div id="frstMenu">choose</div> 
>   <div id="menulist" class="menuList"></div> 
>   <div id="frstList1" class="menuList"></div> <- The child divs are similar this </div> 

자바 스크립트 :

CSS

function ccc(prnt , id , cls, r) { 


var ar=new Array("hi","there","hello","world","adsad","asdsad","dsfsdfs","fdsfsdf","sfdsfsdf","soiqeqjek"); 

var parent=document.getElementById(prnt); 

for (var i=0;i<ar.length;i++) 
    { 
    var node=document.createElement("div"); 

    node.setAttribute("id",id+""+i); 
    node.setAttribute("class",cls); 
    node.setAttribute("onclick","select('"+id+""+i+"')"); 
    node.style.top=(((i)*15)+2)+"%"; 
    node.style.right=r+"%"; 

    node.innerHTML=ar[i]; 
    parent.appendChild(node); 
    } 
    parent.style.display="none"; 
} 

어떻게 그 쿵푸를 호출 할 nction :

ccc("menulist","frstMenu","menulist1","0"); 

이미지 : 메뉴 루프 내부 (위해) 성장해야한다 position: absolute와

Answer 1

- 각 요소를 추가하는 동안 단지 높이를 추가합니다.

parent.style.width = parent.clientHeight + 20; 

그러나 그 과정의 예를 들어 당신은 (계산) 자신을 "20"값을 변경해야합니다 : jQuery를 귀하의 경우에해야 사용하지 않고 높이를 추가

코드는 다음과 같습니다.