div의 높이를 창에서 미리 결정한 높이로 조정

Question

Jquery를 사용하여 사용자가 브라우저 창 크기를 조정하고 쉽게 애니메이션을 추가 할 때 div 높이를 조절하는 솔루션을 찾고 있습니다. 약간의 지연. .graph 클래스의 <div>이 있어야 300px의 최소 높이를 유지하고 창 크기 조정시 700px까지 성장할 수 있어야합니다.

HTML

body,html{ 
margin:0; 
height:100%; 
} 

.current{ 
height:100%; 
min-height:750px; 
position:relative; 
background:#ccc; 
padding:5px; 
} 

.graph{ 
position:absolute; 
width:950px; 
min-height:300px; 
background:#fafafa; 
box-shadow: 0 1px 0 1px #DAD8D8; 
} 

Answer 1

좋아

<div id="slide1" class="current"> 

    <div class="graph resize"> 
    This is where a SVG graph would go 
    </div> 

</div> 

CSS, 나는 그것을 알아 냈다. jQuery 애니메이션 및 일부 CSS 속성을 가지고 놀고 난 후에는 꽤 부드러운 스크립트가 작동합니다.

아무도보고 싶지 않다면 아래에 피들을 포함 시켰습니다.

JSFIDDLE

$(document).ready(function(){ 

$(window).resize(function(){ 

$('.className').css({ 
position:'absolute', 
left: ($("#slide2, #slide3, #slide4").width() 
- $('.className').outerWidth())/2, 
top: ($(window).height() 
- $('.className').outerHeight())/2 
}); 

}); 

// To initially run the function: 

$(window).resize(); 

$(window).on('load resize', function(){ 
$('.className').animate({height: $(window).height()-$('.className').height()/2},300, 
function(){ 

     setInterval(function() { 

     $(".className").css({ 
     top: ($(window).height() 
      - $('.className').outerHeight())/2, 
     }); 

     }, 0); 
     }); 
}); 


});