브라우저 높이가 지정된 픽셀 수보다 작 으면 div 높이를 변경하는 방법은 무엇입니까?

Question

저는 두 가지 크기 중 하나가 되길 원하는 div가 있습니다. 브라우저 윈도우의 높이가 소정 높이보다 더 작다

• 경우, 그것은
• 그러나 DIV위한 작은 높이를 사용하여 브라우저 창 높이가 소정의 높이보다 크다면, 그때는 DIV
대해 더 큰 높이를 사용

다음 코드를 시도했지만 작동하지 않습니다. 도움이 필요해. 지금까지이 http://jsbin.com/oFIRawa/1

그리고 여기에 코드입니다 : 여기

는 jsbin입니다

page.html을

<div id="theDiv">&nbsp;</div> 

있는 style.css

#theDiv { 
    background: #000; 
    border: 2px solid #222; 
    width: 300px; 
    height: 400px; 
    margin: 50px auto 0 auto; 
} 

script.js

$(document).ready(function() { 
    // call the method one time 
    updateWindowSize(); 
    // subscribe the method to future resize events 
    $(window).resize(updateWindowSize); 

    // variables 
    var updateWindowSize = (function(){ 
     var minAllowedWindowHeight = 500; 
     var largerDivHeight = 400; 
     var smallerDivHeight = 300; 

     // actual updateWindowSize function 
     return function(){ 
      var winHeight = $(window).height(); 
      var newHeight = winHeight < minAllowedWindowHeight ? smallerDivHeight : largerDivHeight; 
      $('#theDiv').height(newHeight); 
     }; 
    })(); 
}); 

Answer 1

당신은 CSS에서 나의 좋은 선생님이 작업을 수행 할 수 있습니다. 반응 형 디자인이라고 불립니다!

사람이 (360 픽셀 최대 폭 같은 것을) 모바일 장치를 사용할 때 그것이 우리를 알 수 있기 때문에 더 일반적으로 최대 폭에 사용되는

@media (max-height:500px) { 
    Enter special css conditions for 500px height. 
} 

@media (max-height:200px) { 
    Enter special css conditions for 200px height. 
} 

, 우리는 모바일에 좋은 보는 우리의 페이지를 수정할 수 있습니다. 멋진 자바 스크립트가 필요하지 않습니다!

Answer 2

var threshhold; 
var smallerHeight = 50; 
var largerHeight = 100; 

if ($(window).height() < threshold) 
    $('#theDiv').height(smallerHeight); 
else 
    $('#theDiv').height(largerHeight); 

바이올린

Demo