떠 다니는 자식을 부모의 높이로 확장하려면 어떻게해야합니까?

Question

나는 내비게이션으로 사용하고있다. <ul>. 화면이 충분히 작아지면 탐색 항목의 일부 텍스트가 2 줄로 이동합니다. 괜찮습니다. 그러나 한 줄에 계속있는 nav 항목을 가지고 싶습니다. <ul>의 전체 높이까지 확장하십시오.

http://jsfiddle.net/quasipickle/msTDe/ 예를 들어 - 오른쪽 (CSS/Result) 열이 충분히 작아지면 "AB BC"텍스트가 2 줄로 나뉘지만 첫 번째 항목은 커지지 않습니다.

이 문제는 특정 중단 점에서 발생하므로 가능한 경우 명시 적으로 높이를 설정할 수 있지만 가능한 경우 자동으로 수행해야합니다.

Answer 1

제가 알고있는 유일한 방법은 <li> 요소에 height:100%을 가질 수 있지만 귀하의 <ul>에 고정 높이가 있어야합니다. 그렇지 않으면 작동하지 않습니다.

불행히도 달성하고자하는 것은 상위 너비를 채우기 위해 요소를 늘리려고 할 때 쉬운 동작이지만 높이와 같은 방식으로 작동하지 않습니다.

Answer 2

고정 된 높이로 했습니까?

ul{ width:100%; height:40px;background:red; overflow:auto;position:relative;} 
ul li{ position:relative; float:left; background:green; padding:0 3px;height:100%;} 
ul li:nth-child(3){ width:10%; }​