jquery로 표시된 div가 잘립니다.

Question

나는 이상한 행동을 취하려고 노력하고 있습니다.

는이 같은 대한 일반적인 구조와 길고 복잡한 HTML 페이지가 다음 "주요 내용"모든 액션이 일어나고에서

+------------------------------------------+ 
| Page header        | 
+-----------------------------+------------+ 
|        | Right  | 
| Main content    | Column | 
|        |   | 
+-----------------------------+------------+ 

합니다. 사용자의 버튼 클릭 중 하나가 발생할 수 있습니다. 처음에는 보이지 않는 위치의 div가 표시되고 해당 내용이 AJAX를 사용하여 채워집니다 (즉, 얼마나 많은 콘텐츠가 미리 있는지 모릅니다) .

이 div의 전체 height이 "주 콘텐츠"의 사용 가능한 높이보다 작아지면 정상적으로 작동합니다. 그러나이 "팝업"div가 많은 콘텐츠로 인해 길어지면 "Main content"div의 맨 아래에서 잘립니다. 아래에는 아무것도 없으므로 팝업의 모든 내용을보기 위해 아래로 스크롤 할 수도 없습니다. 팝업의 전체 높이와 스크롤 할 수있는 페이지를 팝업의 맨 아래까지 줄이기 위해 "주 콘텐츠"를 늘려야 할 것입니다. 그러나 이것은 일어나지 않습니다.

.content { 
    width: 770px; 
    position: relative; 
    overflow-x: visible; 
    overflow-y: hidden; 
} 

그리고 여기에 팝업에 대한 CSS입니다 : 여기

내 "주요 내용"에 대한 CSS입니다

#popupedit { 
    background-color: #f1f0ec; 
    width: 770px; 
    z-index: 100001; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    display: none; 
} 

가 HTML에서 popupedit이 content의 직접적인 자식입니다. 체인에 높이 또는 최대 높이 제한이 없습니다. 그렇다면 왜 "컨텐츠"가 "팝업"을 수용하기 위해 증가하지 않는 것입니까?

Answer 1

절대 위치 지정을 제거하고 다른 기술 (예 : 수레)을 사용하여 팝업을 배치하여이 문제를 해결할 수 있습니다. 맞춰 볼까요, position: absolute도 필요합니까? :) 그렇다면 여전히 희망이 있습니다. 컨텐츠가로드 된 후 JavaScript로 컨텐츠 div의 크기를 조정할 수 있습니다. 물론

$(".content").css("min-height", $("#popupedit").height()+"px"); 

이 팝업가 완전히로드 된 후 실행해야하고, 팝업이 종료하면 당신은 아마 크기 조정을 취소해야합니다

$(".content").css("min-height", ""); 

Answer 2

.content div 내에 팝업을 만드는 것처럼 보입니다.

overflow-y : hidden이 있는데 오버플로가 숨겨집니다.

콘텐츠 div에서 팝업을 이동해보십시오.

Answer 3

overflow-y를 제거하십시오 : 숨김; 작동해야합니다. 또한 나는 popupedit 고정 높이를

편집을 제공하는 것이 좋습니다 것입니다 :

var hh = document.getElementById('popupedit').offsetHeight; 
document.getElementById('fix').style.height = hh + "px"; 

CSS :

.content { 
    width: 770px; 
    position: relative; 
    overflow-x: visible; 
    overflow-y: hidden; 
    height: auto 
} 
#popupedit { 
    background-color: #f1f0ec; 
    width: 770px; 
    z-index: 100001; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

#fix { width: 770px; } 

HTML :

<div class = "content"> 
    <div id = "popupedit"> 
     <p>Something important</p>     
    </div> 
    <div id = "fix"></div> 
</div> 

Answer 4

한번에 확인이

JS 해킹 시도 0 제거of .content. 이것은 어쨌든 필요하지 않습니다 (당신이 말하지 않은 것에 그것을 필요로하지 않는다면). 이것은 큰 오해입니다. 많은 사람들이 거의 모든 요소에 position: relative;을 사용합니다. 그건 전혀 필요하지 않습니다.

#popupedit이 이제는 부모가 아닌 절대적으로 자신을 위치시키기 때문에 문제가 발생할 수 있습니다. 내가 제안하는 것은 position: relative;을 삭제하고 팝업을 정적 인 width에주고 가로 위치를 jQuery로 중심에 놓습니다.또한 top: 0; 및

left: 0; 없애 그럼 당신은 별도의 파일에 (큰 문제가 아닙니다) 당신이 터지는 - 그것 - 업을위한 전화 코드에이 코드 조각을 추가하거나 :

$("#popupedit ").css({ 
    left: ($(window).width() - $('.className').outerWidth())/2, 
    top: ($(window).height() - $('.className').outerHeight())/2 
});​