자바 스크립트 크기 조정 기능

Question

화면 크기에 따라 요소의 크기를 조정하는 자바 스크립트에서 문제가 발생합니다. 간단한 클래스를 css 같은 기능을 가진이 코드를 번역하고 싶습니다.

$(window).resize(function(){ // On resize 
    $('item2').css({'height':(($(window).height()))+'px'}); 
}); 

나는

.test2 { 
    height: 100%; 
} 

그러나 작업 어쩌려 구`t

을 시도 - 나는 스크립트의 일부 요소는 (전체 화면의 높이)를 원하지 않을 삭제합니다. 스크립트

문제는 사용하지 않는 미디어 쿼리 변경은`t 마크 업 스타일을 구현한다는 것입니다! 중요 ...

Answer 1

, 당신은 문서 흐름을 유지하려는 경우, 당신은 또한 설정해야합니다, 그 요소에 position:fixed를 설정하고 height:100%을 추가, 또는 중 문서의 높이를 100 %로 설정하고 자식 요소의 부모도 모두 100 % 높이가되어야합니다.

가장 쉬운 방법은 분명히 첫 번째 방법이지만 자연스러운 문서 흐름에서 요소를 가져 오는 옵션입니다.

.test2{ 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    z-index:2; 
} 

$(window).resize(function(){ 
    $('item2').addClass('test2); 
}); 

이 기능은 모든 resize 이벤트에서 실행되므로 성능이 많이 저하됩니다. https://davidwalsh.name/javascript-debounce-function

Answer 2

item2 당신이 선택에 .를 추가 할 필요가 다음 class 경우 . 당신이 화면 높이와 같은 height 인 요소를 가지고 들어

$(window).resize(function(){ // On resize 
    //$('.item2').css({'height':(($(window).height()))+'px'}); 
    $('.item2').height($(window).height()); 
});