CSS - 절대 위치에있는 자식을 포함하는 요소의 자동 높이?

현재 개발 중입니다. 을 포함하는 <nav> 요소가 있습니다. 주 목록의 오른쪽에있는 하위 목록 (nav ul li ul)의 절대 위치에 있습니다.CSS - 절대 위치에있는 자식을 포함하는 요소의 자동 높이?

내가 겪고있는 문제는 하위 목록이 절대 위치에 있기 때문에 하위 목록이 주 목록보다 길거나 (키가 큼), 요소가이를 수용하기 위해 늘어나지 않는다는 것입니다. 내 뜻을 보여주는 예는 아래 이미지를 참조하십시오.

<nav> 
    <ul> 
     <li><a href="#">List 1</a></li> 
     <li> 
      <a href="#">List 1</a> 
      <ul> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
    </ul> 
</nav><!-- /nav -->

이에 대한 해결책의 어떤 생각을 다음과 같이

enter image description here

내 HTML은? 이상적으로는 의미 론적 이유로 중첩 목록으로 유지하고 싶습니다.

감사합니다.

UPDATE :

작업, 예를 들어 다음과 같은 jsFiddle를 참조하십시오 - http://jsfiddle.net/TcYBQ/

출처

2011-09-20 Probocop

에 링크 질문에 jQuery를의 변형을 사용하여이 문제 (http://jsfiddle.net를 해결하려면 /)? – thirtydot

jsFiddle에 대한 링크로 내 질문을 업데이트했습니다 – Probocop

비슷한 질문으로 당신을 도울 수 있습니다 : http://stackoverflow.com/questions/1650539/how-to-clear-absolutely-positioned-elements – derekerdmann

난 당신이 현재 CSS를 추가 + A [jsFiddle 데모]을 만들 수 @derekerdmann

var maxHeight = 0; 
$('#top nav ul').each(function() { 
    var tmpHeight = $(this).height() + $(this).position().top; 

    if (tmpHeight > maxHeight) { 
     maxHeight = tmpHeight; 
     $('#top nav').height(maxHeight + 20); 
    } 
});

출처

2011-09-21 09:51:21 Probocop

동시에 모든 제약을 만족시킬 수 없다 :

부모 요소가 있어야 정확한 높이를 유지하십시오.
JavaScript가 없습니다.
HTML에서 "목록 2"는 "목록 1"내에 있어야합니다.

상위에 올바른 높이를 두려면 "목록 2"에서 절대 위치 지정을 사용할 수 없습니다. 불행히도 "목록 2"를 있어야 할 곳에 옮길 방법이 없습니다. 이러한에서

픽업 :

를 사용하여 자바 스크립트의 높이를 설정하고 의미 HTML을 유지합니다.
"목록 1"밖으로 "목록 2"이동하고 JavaScript를 피하지만 의미 론적 HTML을 희생.

나머지 사이트가 크게 의존하지 않는 한 JavaScript를 사용하지 않으려 고합니다.

출처

2011-09-20 11:10:21 thirtydot

탭 순서 등의 의미를 유지하기 위해 실제로 JavaScript 옵션을 사용했습니다. 응답 해 주셔서 감사합니다. – Probocop

CSS - 절대 위치에있는 자식을 포함하는 요소의 자동 높이?

답변

관련 문제