jquery div 콘텐츠와 창 높이가 동일합니다.

내 콘텐츠 div height을 window.height - (footer.height + header.height)과 동일하게 설정하려고합니다. 나는 또한 내용을 overflow-y to scroll로 만들었다. div 내부의 내용이 높이 제한을 초과하지 않는 한 div가 스크롤 모드로 이동하는 대신 높이가 늘어나지 않는 한 완벽하게 작동합니다. 여기에서 누락 된 내용을 말해 줄 수 있습니까? 미리 감사드립니다!jquery div 콘텐츠와 창 높이가 동일합니다.

$("#p_body").height($(window).height() - ($("#p_header").height() + $("#p_footer").height())); 
$("#content_body").height($("#p_body").height() - ($("#content_header").height() + 10));

페이지 구조 :

<div id="p_header"></div> 
<div id="p_body"> 
<div id="content_header"></div> 
<div id="content_body" style="overflow-y:scroll;"></div> 
</div> 
<div id="p_footer"></div>

출처

2014-02-18 durian

내게 문제가 보이지 않으면 [this] (http://jsfiddle.net/7T8vL/)에서 원하는대로 작동합니까? –

본문에 넣은 내용이 창 높이보다 길지 않으면 작동하지 않습니다.이 경우에는 content_body가 늘어납니다. 항상 같은 높이로 유지하고 그 안의 내용을 스크롤하기를 원합니다. – durian

카일에 동의합니다. 스크롤 영역을 작게하려면 계산 결과에 스크롤 영역을 포함 시키거나 스크롤 영역을 하드 높이 값으로 지정해야합니다. 보내 주신 코드는 의도 한대로 작동합니다. 특히 콘텐츠를 추가 할 때 : http://jsfiddle.net/zyV3W/1/. – Lowkase

내가 그것을 가지고, 문제는 같은, 내가 내 콘텐츠 사업부에 대한 고정 된 높이 값을 설정했다이었다

<div id="p_header"></div> 
<div id="p_body"> 
<div id="content_header"></div> 
<div id="content_body" style="overflow-y:scroll; **height:10px;**"></div> 
</div> 
<div id="p_footer"></div>

그렇지 않으면 코드는 div 내부의 내용이 window.height()를 벗어날 때까지 제대로 작동하여 고정 높이로 내용 divs 높이를 보지 못했습니다.

출처

2014-02-19 23:49:00 durian

jquery div 콘텐츠와 창 높이가 동일합니다.

답변

관련 문제