2013-01-24 2 views
1

내 페이지 디자인의 주 컨텐츠 영역으로 절대 div가 있습니다. 상단 부분을 차지하고 높이가 450 픽셀 인 다른 div가 있습니다. 페이지로드 전에 절대 div 높이를 알 수 없으므로 페이지로드가 발생한 후에 만이를 찾을 수 있습니다.본문의 높이를 절대 div의 높이 이상으로 설정하십시오.

이제 문제는 내 몸도 450px (높이)를 차지하므로 절대 div가 종료 된 후 무언가를 표시하고 싶다면 그렇게 할 수 없습니다.

요약 :

Absolute Div : 600px (for example, don't know the actual height) Has position:absolute. 
Top Div : 450px (No position:absolute) 
Body Becomes 450 px as expected 

어떻게 절대 DIV 아래 사업부를 배치합니까. 현재 내가 생각할 수있는 유일한 것은 jQuery입니다.

여기는 jsfiddle입니다. 문제를 설명하기 위해 작성되었습니다. 몸 전체가 파란색 표시 비록 당신이 개발자 도구를 발사하고 검사하는 경우, 당신은 HTML과 몸이 모두 차지하는 것을 볼 수 있습니다

Body Height is less

업데이트 : 나는 주요 내용을 표시하기 위해 노력하고있어 Linky 몇 가지 요소 위에있는 영역. 당신이 보는 동그라미는 별개의 요소입니다. 그리고 그들은 그런 식으로 머물러야합니다.

+0

절대 위치 지정은 흐름에서 절대 div를 제거하고 몸체가 그곳에 있다는 것을 모릅니다. 나는 당신이 절대적인 포지셔닝없이하려는 것을 할 수 있다고 확신합니다. 왜 절대적으로 배치되어야한다고 결정한거야? –

+0

https://dl.dropbox.com/u/14863356/Blah/index.html 몇 가지 요소 위에 주요 콘텐츠 영역을 표시하려고합니다. 당신이 보는 동그라미는 별개의 요소입니다. 그리고 그들은 그런 식으로 머물러야합니다. –

+0

현재 상태에서 이해하는 것이 조금 복잡합니다. 서클을 포함한 간단한 버전을 만들 수 있다고 생각하십니까? –

답변

1

위치에 대해 더 자세히 알아야한다고 생각합니다. 위치를 상대 위치로 변경하면 어쨌든 현재 참조하고있는 문제가 해결됩니다! 당신이 정말로 그것을 어딘가에 정적 또는 다른 단어에 "절대"배치해야하는 경우

<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;"> 
</div> 
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;"> 
</div> 

는하지만, 당신은 다른 두 혹은 그 이상 또는 내부를 배치, 컨테이너 사업부를 배치하고 절대적으로 위치를 설정해야 컨테이너 사업부

<div id="container" style="position:absolute; top:y; left:x"> 
    <div id="FirstDiv" style="position:relative;></div> 
    <div id="SecondDiv" style="position:relative;></div> 
</div> 

jquery를 사용하여 컨테이너에 태그를 추가 할 수 있습니다. here is the sample link to do it!

height:autooverflow:visible을 컨테이너에 사용해도 도움이되지 않았다면!

관련 문제