절대적으로 배치 된 요소에서 자동 높이를 얻으려고 내 콘텐츠 div를 얻도록 도와주십시오.

Question

CSS 레이아웃에 대한 도움이 필요합니다. 다음과 같이 설정됩니다.

 
+--------------------+ 
| | | header  | 
|-| |--------------| 
| |nav| content | 
| | |    | 
| | |    | 
| | |    | 
| footer    | 
+--------------------+ 

따라서 nav는 모든 기본 페이지 콘텐츠 위에 떠 있어야합니다. 그것이 내가 절대적으로 자리 매김하도록 설정 한 이유입니다. 문제는 설정된 높이가없는 탐색 항목이 동적이라는 점입니다. 지금 바로 탐색 메뉴가 콘텐츠를지나 확장됩니다. 콘텐츠가 nav를 기반으로 한 자동 높이를 갖도록 수정하려면 어떻게해야합니까?

미리 감사드립니다.

http://csslayout.commercev3.com/에서 지금까지 내가 무엇을 가지고 있는지보십시오. 왼쪽 네비게이션과 콘텐츠 div가 동적 인 문제도 있습니다. 따라서 콘텐츠 div는 왼쪽 탐색 메뉴와 최소한 일치해야하고 자체 콘텐츠이기 때문에 확장해야합니다.

Answer 1

jQuery를 사용해야 할 수도있는 것처럼 들리 겠지만 다음과 같이 할 수 있습니다. 여기

$(function(){ 
    var headerHeight = $('#header').height(); 
    var navHeight = $('#nav').height(); 
    var contentHeight = navHeight - headerHeight; 
    $('#content').css('minHeight',contentHeight); 
}) 

내가 현재 유사한 솔루션을 구현하고 있기 때문에이 제안 working fiddle 우리 conclusive fiddle

입니다. 그렇지 않으면 javascript/jQuery가 없으면 순수한 CSS를 사용하여 형제 관계를 절대적으로 배치 된 요소로 결정할 수 없다는 것이 상당히 긍정적입니다.

Answer 2

네비게이션 메뉴에 명시적인 높이가 설정되었다고 가정하고이를 제거하고 모든 것이 잘되어야합니다 (works in this fiddle). 그렇지 않다면 코드를 붙여 넣을 수 있습니까?

Answer 3

CSS에서 변수를 사용할 수 없기 때문에 이동 div와 관련하여 플로팅 div를 만들어야합니다 (WC3이 싫은 또 다른 이유는 원하는 것을 제공하지 못하기 때문에 필요한 부분 만 알려주고 있습니다). 항상 틀렸어. 나는 너를 너무 싫어. WC3 ...).

Answer 4

예제 페이지를 보면 실제로는 position: absolute;이 필요하지 않은 것으로 보입니다. 탐색 상자를 float: left으로 설정하고 html을 #content div 안에 변경하십시오. Yu는 #content div의 명시적인 높이를 제거해야 할 수도 있습니다.