사이드 바 탐색의 높이 변경

Question

나는 10 % 너비의 사이드 바 탐색 기능을 가지고 있습니다. 그러나 특정 폭 (작은) 사이드 바는 다음과 같습니다

"로렘 입숨는"서로 아래 그것은 내가 원하는 게 아니에요. 사이드 바 탐색 (오렌지 부분)의 높이가 동일하게 유지되고 텍스트가 div에서 사라지 길 원합니다. 어떻게해야합니까?

HTML :

<div id="sideMenu"> 
     <ul> 
      <li> Blog </li> 
      <li> Lorem ipsum </li> 
      <li> Lorem ipsum </li> 
      <li> About us </li> 
      <li> Contact </li> 
     </ul> 
    </div> 

CSS :

#sideMenu { 
    background-color: red; 
    width: 10%; 
    transition: 0.5s; 
    position: fixed; 
    top: 0; 
    height: 100%; 
} 

#sideMenu ul li { 
    background-color: orange; 
    font-size: 20px; 
    padding: 10px 0px; 
    text-align: center; 
} 

Answer 1

당신은 당신이 당신의 코드를 다음과 같이 변경하여 뭘 하려는지 수행 할 수 있습니다

#sideMenu { 
    overflow: hidden; 
} 

#sideMenu ul li { 
    white-space: nowrap; 
} 

#sideMenu { 
 
    background-color: red; 
 
    width: 10%; 
 
    transition: 0.5s; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#sideMenu ul li { 
 
    background-color: orange; 
 
    font-size: 20px; 
 
    padding: 10px 0px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
}

<div id="sideMenu"> 
 
    <ul> 
 
    <li> Blog </li> 
 
    <li> Lorem ipsum </li> 
 
    <li> Lorem ipsum </li> 
 
    <li> About us </li> 
 
    <li> Contact </li> 
 
    </ul> 
 
</div>