Jquery resize calculation glitch

Question

내 창 크기를 조정할 수있는 jQuery 너비 계산을 설정했지만 모두 잘 작동하지만 크기를 조정하고 늘어날 때 컨테이너의 너비가 다른 '글리치'또는 초가 있습니다. 겹치고 넓은 간격을 남깁니다. jQuery는 계산을 수행하고 있기 때문에 이것이 정상적인 현상이며 주변에는 존재하기 때문에이 사실을 알고 있습니다.

if ($("#Grid").css("margin-bottom") === "1px") { 
    oneCol(); 
} 

if ($("#Grid").css("margin-bottom") === "0px") { 
    twoCol(); 
} 

function oneCol() { 
    $('#middle').hide(); 
    $('#Grid').css('width', '100%').css('width', '-=170px'); 
} 

function twoCol() { 
    $('#middle').show(); 

    $('#middle').outerWidth(function() { 
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth()/2; 
    }); 

    $('#Grid').outerWidth(function() { 
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth()/2; 
    }); 
} 


$(window).on('resize', function() { 
    if ($("#Grid").css("margin-bottom") === "1px") { 
     oneCol(); 
    } 

    if ($("#Grid").css("margin-bottom") === "0px") { 
     twoCol(); 
    } 
}); 

여기가 내 JSFiddle입니다.

Answer 1

좋아요, Chrome에서 이상하게 보입니다. 확실하지 당신이 그것을 완전히 제거 할 수 있지만,이 크기 조정 루틴을 최적화하여 더 많이 보이는 경우 : 당신이 outerWidth 필요한 경우

function oneCol() { 
    $('#middle').hide(); 
    $('#Grid').width($(window).width() - $('#left').outerWidth()); 
} 

function twoCol() { 
    $('#middle').show(); 
    var w = ($(window).width() - $('#left').outerWidth())/2; 
    $('#middle').width(w); 
    $('#Grid').width(w); 
} 


$(window).on('resize', function() { 
    if ($(window).width()<100) { 
     oneCol(); 
    } else { 
     twoCol(); 
    } 
}); 

당신은, 너무 jQuery를에 패딩과 테두리를 추가 할 수 있습니다.

(나는 또한 CSS에서 @media 규칙을 제거했습니다. 이것이 큰 차이가 있는지 확실하지 않습니다. 그렇다면 상자 크기 조정 등을 jQuery와 함께 추가 할 수 있습니다).