[JQUERY] CSS 폭 : 계산치 (100 % -100px); 대체 사용 JQuery와

CSS 폭 : 계산치 (100 % -100px); 대체 사용 JQuery와

해결법

1. ---

   1.당신이 CALC 식을 지원하지 않는 브라우저를 사용하는 경우, 그것은 jQuery를 함께 모방에 어렵지 않다 :

   당신이 CALC 식을 지원하지 않는 브라우저를 사용하는 경우, 그것은 jQuery를 함께 모방에 어렵지 않다 :

   $('#yourEl').css('width', '100%').css('width', '-=100px');
   

   그것은 jQuery를이 직접하는 것보다 상대적 계산을 처리하도록하는 것이 훨씬 쉽다.

2. ---

   2.나는 이것이 또 다른 방법이 될 수있다 생각

   나는 이것이 또 다른 방법이 될 수있다 생각

       var width=  $('#elm').width();
   
       $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });
   

3. ---

   3.동일 -100px 100 %

   동일 -100px 100 %

   div.thediv {
     width: auto;
     margin-right:100px;
   }
   

   jQuery로 :

   $(window).resize(function(){
     $('.thediv').each(function(){
       $(this).css('width', $(this).parent().width()-100);
     })
   });
   

   비슷한 방법으로 jQuery를 크기 조정 플러그인을 사용하는 것입니다

4. ---

   4.의 jQuery 애니메이션 () 메소드, 예를보십시오.

   의 jQuery 애니메이션 () 메소드, 예를보십시오.

   $("#divid").animate({'width':perc+'%'});
   

5. ---

   5.아니고 그 그것은 단지 폭과 높이 최선 작동하지만 당신이 당신의 기대에 따라 그것을 확장 할 수 있지만, :-) 자바 스크립트 복제하기 어려운 :-)

   아니고 그 그것은 단지 폭과 높이 최선 작동하지만 당신이 당신의 기대에 따라 그것을 확장 할 수 있지만, :-) 자바 스크립트 복제하기 어려운 :-)

   function calcShim(element,property,expression){
       var calculated = 0;
       var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")","");
       // Remove all the ( ) and spaces 
       // Now find the parts 
       var parts = freed_expression.split(/[\*+-\/]/gi);
   
       var units = {
           'px':function(quantity){
               var part = 0;
               part = parseFloat(quantity,10);
               return part;
           },
           '%':function(quantity){
               var part = 0,
               parentQuantity = parseFloat(element.parent().css(property));
               part = parentQuantity * ((parseFloat(quantity,10))/100);
               return part;
           } // you can always add more units here.
       }
   
       for( var i = 0; i < parts.length; i++ ){
           for( var unit in units ){
               if( parts[i].indexOf(unit) != -1 ){
                  // replace the expression by calculated part.
                  expression = expression.replace(parts[i],units[unit](parts[i]));
                  break;
               }
           }
       }
       // And now compute it. though eval is evil but in some cases its a good friend.
       // Though i wish there was math. calc
       element.css(property,eval(expression));
   }
   

6. ---

   6.당신은 당신의 CSS 파일을 사용 PolyCalc 같은 polyfill에서 석회질을 사용합니다. (예를 들어, 아이폰 OS (6) 아래에 안드로이드 4.4 폰 이하) 모바일 브라우저에서 작동하는 빛이 충분해야한다.

   당신은 당신의 CSS 파일을 사용 PolyCalc 같은 polyfill에서 석회질을 사용합니다. (예를 들어, 아이폰 OS (6) 아래에 안드로이드 4.4 폰 이하) 모바일 브라우저에서 작동하는 빛이 충분해야한다.

from https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery by cc-by-sa and MIT license