2013-11-24 4 views
0

변경 난 다음 코드를 가지고 연결된 스타일의 정의가윈도우 높이 있다면, CSS 높이

$(document).ready(function() { 

    $('body').css('overflow', 'scroll'); 
    var heightWithScrollBars = $(window).height(); 
    $('body').css('overflow', 'auto'); 

    alert('heightWithScrollBars = ' + heightWithScrollBars); 

    if (heightWithScrollBars < 700){ 
     $(".vert, .simply-scroll-clip").height('270px'); 
    }   
}); 

- 이들 요소는 400 픽셀의 높이가 모두 그.

화면이 실제로 700보다 작 으면 if {}이 실행되지만 높이 변경이 실행되지 않습니다. 하지만 콘솔에서 정확한 라인 $(".vert, .simply-scroll-clip").height('270px');을 실행해도 명령이 실제로 작동합니다. 그러나 그것이 onload를 달릴 때 아닙니다.

아무도 말해 줄 수 있습니까?

감사합니다.

+0

'$ (document) .ready()'에 이것을 감쌀 것을 잊었을 것입니다. 또한이 코드는 한 번만 실행되며,이 변경을 위해'window.resize' 이벤트에 응답하려고합니다. – Mathletics

+0

"onload를 실행할 때"window onload 이벤트 내에 코드를 래핑 하시겠습니까? 그렇지 않다면, –

+0

을'ready()'함수 내에서 올바르게 시도해보십시오. 예, 한 번 실행됩니다. – kneidels

답변

0

viewport-widthresize 이벤트와 함께 사용할 수 있습니다.

.vert, .simply-scroll-clip { 
    height: 2vw; 
} 

그리고이

var causeRepaintsOn = $(".vert, .simply-scroll-clip"); 

$(window).resize(function() { 
    causeRepaintsOn.css("z-index", 1); 
}); 

소스의 크기를 조정 폭스 바겐의 측면에서 높이를 적용 : CSS-Tricks을 || 한 번 프로젝트에 사용했습니다.