2012-06-10 7 views
0

나는 작은 질문이 있습니다. 어떻게 2 div의 높이를 설정하여 접기가 줄어들지 않고 윈도우를 최소화하면 동적으로 확장 할 수 있습니까? 이 노력divs가 브라우저를 최소화 할 때 div를 축척하여 divs가 서로 위에 붕괴되지 않도록하는 방법

$(document).ready(function(){ 
    var footer = document.getElementById('footer').offsetHeight; 
    var sidebar = document.getElementById('sidebar').offsetHeight; 
    document.getElementById('sidebar').style.height = sidebar - footer + 'px'; 

}); 

하지만 난 최소화 할 때, 난 함수에서 할 및 window.load 동안이나 그렇게 전화를해야하지 : 나는 JS에서 이런 짓을? 문제는 지금은 브라우저를 최소화 할 때 div가 다시 서로를 통해가는 것입니다 ..

감사

+0

창이 최소화되면서 작업 표시 줄이 최소화됩니다. 또는 '최소 크기'로 크기를 조정 하시겠습니까? –

+0

브라우저의 '최소화'버튼을 클릭하여 창 (브라우저)을 최소화합니다. 창을 완전히 열었을 때 div가 그대로 있어야합니다. 하지만 이제는 창을 최소화 할 때 하나의 div가 다른 창을 덮고 있습니다. 구체적 : 창을 최소화하면 내 사이드 ​​바에서 내 바닥 글을 덮고 있습니다. 나는 그것을 원하지 않는다. 나는 창 크기를 조절하는 방법과 상관없이 사이드 바가 바닥 글에 약간의 거리를 유지해야한다. – doniyor

답변

2

난 당신이 여기

$(document).ready(function(){ 
    var sidebar = document.getElementById('sidebar').offsetHeight; 
    $(window).resize(function(){ 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = sidebar - footer + 'px'; 
    }); 
}); 
+0

이 코드는 좋지만이 코드에는 다른 문제가 있습니다. 그래서 이제는 창을 그릴 때마다 높이가 다시 설정됩니다. 이제 2 번 크기를 조정하면 사이드 바가 두 배 더 작아지고 있습니다. :)). – doniyor

+0

각 크기 조정시 사이드 바를 사용하기 때문입니다. 샘플의 코드가 업데이트되었습니다. 아직 원하는지 확실하지 않지만 크기가 –

+0

일 때마다 작동시키는 방법을 알 수 있지만 버그가있을 때마다 사이드 바의 크기를 조정해야합니다. :(. – doniyor

0

가있는 resize 이벤트에 바인딩 할 필요가 있다고 생각 한 번 이런 종류의 설정을 검색 할 사람들도 솔루션 ...

<script type="text/javascript"> 
$(document).ready(function(){ 
    var winh = document.body.clientHeight; 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px'; 
    document.getElementById('sidebar').style.marginBottom = footer + 'px'; 
$(window).resize(function(){ 
    var winh = document.body.clientHeight; 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px'; 
    document.getElementById('sidebar').style.marginBottom = footer + 'px'; 
    }); 
}); 
</script> 

이 코드 document.ready 동안 또한 크기 조정시에 모두 동적 사이드 바의 높이를 설정합니다. 도움을 주신 바트에게 감사드립니다!

관련 문제