CSS Calc 대안

CSS Calc 대안

---

CSS를 사용하고 jquery를 사용하지 않고 div의 너비를 동적으로 변경하려고합니다. 다음 코드는 다음 브라우저에서 작동 합니다. http://caniuse.com/calc

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

IE 5.5 이상도 지원하고 싶습니다 . 다음을 찾았습니다. 이것이 올바른 사용법입니까?

/* IE-OLD */
width: expression(100% - 500px);

Opera와 Android 브라우저도 지원할 수 있습니까?

---

거의 항상 레이아웃에 사용되는 box-sizing: border-box계산 규칙을 ​​대체 할 수 있습니다 calc(100% - 500px).

예를 들면 :

다음 마크 업이있는 경우 :

<div class="sideBar">sideBar</div>
<div class="content">content</div>

대신 : (사이드 바 너비가 300px라고 가정)

.content {
  width: calc(100% - 300px);
}

이 작업을 수행:

.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}

<div class="sideBar">sideBar</div>
<div class="content">content</div>

추신 : IE 5.5 (hahahaha)에서는 작동하지 않지만 IE8 +, 모든 모바일 및 모든 최신 브라우저 ( caniuse )에서는 작동합니다.

폭 데모

높이 데모

방금 Paul Irish의 블로그에서 간단한 calc () 표현식의 가능한 대안으로 box-sizing을 보여주는 이 게시물 을 찾았 습니다 . (bold is mine)

border-box가 잘 해결하는 가장 좋아하는 사용 사례 중 하나는 열입니다. 그리드를 50 % 또는 20 % 열로 나누고 싶지만 px 또는 em을 통해 패딩을 추가하고 싶습니다. CSS의 곧 출시 될 calc () 없이는 불가능합니다 ... border-box를 사용하지 않는 한 .

주의 : 위의 기술은 실제로 해당하는 calc () 문과 동일하게 보입니다. 그래도 차이가 있습니다. calc () 규칙을 사용할 때 콘텐츠 div의 너비 값은 실제로 100% - width of fixed div이지만 위의 기술을 사용하면 콘텐츠 div의 실제 너비는 100 % 너비이지만 '채움' 의 모양 을 갖 습니다. 나머지 너비. (대부분의 사람들이 여기에서 필요로하기에 충분할 것입니다)

즉, 콘텐츠 div의 너비가 실제로 중요한 경우 100% - fixed div width블록 서식 컨텍스트를 사용하는 다른 기술을 사용할 수 있습니다 (자세한 내용은 여기 와 여기 참조).

1) 고정 너비 div 부동

2) 콘텐츠 div 설정 overflow:hidden또는overflow:auto

데모

---

계산이 트릭을 수행하기 전에 폴 백이 있습니다.

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/calc를 참조하십시오.

---

이것을 사용하십시오

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}

---

andriod 장치의 특정 경우에 대해이 문제를 해결하기 위해 3 시간의 가장 좋은 부분을 보냈고, 상자 크기 조정이 작동하지 않았으므로 더러운 해결 방법으로 내 JS에 연결했습니다 ...하지만 jQuery가 필요하지 않습니다! :)

andriod 2.3에서 작업 코드를 가져 왔습니다.

<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>

이벤트 리스너가있는 JS

var orient =
{
    orientation:window.orientation,
    width: window.innerWidth,
    check: function()
    {
        // if orientation does not match stored value, update
        if(window.orientation !== this.orientation)  
        {
            this.orientation = window.orientation; //set new orientation
            this.width = window.innerWidth; //set new width
            this.adjustIrritatingCSS(this.width); //change ui to current value
        }
        //if width does not match stored value, update
        if(window.innerWidth !== this.width)
        {
            this.width = window.innerWidth; //set new width
            this.adjustIrritatingCSS(this.width); //change ui to current value
        }
    },
    adjustIrritatingCSS: function(screenWidth)
    {   
    //disgusting workaround function
        var titleBoxes = document.getElementsByClassName('sessionDiv'); 
        var i = titleBoxes.length;
        var sessWidth = screenWidth - 300; // calc(100% - 300px); -> equivalent
        while(i--)
        {
            titleBoxes[i].style.width = String( sessWidth + "px"); 
            //resize image in auto sized div
        }
        sessWidth = null; //clear width
        titleBoxes = null; //clear nodelist
        i = null; // clear index int
    }
};

window.onload = function()
{
    window.addEventListener('resize', function(){orient.check();}); 
    //on resize, check our values for updates and if theres changes run functions
    window.addEventListener('orientationchange', function(){orient.check();});
    //on rotate, check our values for updates and if theres changes run functions
    setInterval(function(){orient.check();}, 2000);
    //occasionally check our values for updates and if theres changes run functions(just incase!!)
    orient.adjustIrritatingCSS(orient.width); 
    //sets value on first run
};

이것이 상자 크기를 조정할 수없는 사람에게 도움이되기를 바랍니다! 추신 나는 이것을 사용하여 ios에 문제가 발생했습니다 ...

---

% 또는 px로 #menuLog 너비를 변경하면 마술을 볼 수 있습니다. 2.3 미만의 모든 장치에서 작동

*{
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#menuLog{
  width:30%;
  /*width:300px;*/
	height: 60px;
	padding: 5px;
	background-color: #ddd;
}
#menuLog > div[inline-log="1"]{
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	margin-right: -60px;
}
#menuLog > div[inline-log="1"] > div[inline-log="1.1"]{
	margin-right: 60px;
	height: 100%;
	background-color: red;
}
#menuLog > div[inline-log="2"]{
	display: inline-block;
	vertical-align: top;
	width: 60px;
	height: 100%;
}
#menuLog > div[inline-log="2"] > div[inline-log="2.1"]{
	display: inline-block;
	vertical-align: top;
	width: 55px;
	height: 100%;
	background-color: yellow;
	margin-left:5px;
}

<div id="menuLog">
  <div inline-log="1">
    <div inline-log="1.1">
      One
    </div>
  </div><div inline-log="2">
     <div inline-log="2.1">
      Two
     </div>
  </div>
</div>

---

계산하지 않고 테두리가없는 상자 (예 : CSS2) 대안을 추가하고 싶었습니다.

Normal-flow block elements initially have width: auto, which is effectively the width of the containing block minus the margin, border, and padding widths.

The example above can be done, without border-box, simply as

.content {
    padding-left: 300px;
}

Similarly, with

.content {
  margin-left: 1px;
  border-left: 1em solid;
  padding-left: 1rem;
}

the effective width is 100% - 1px - 1em - 1rem.

For absolutely positioned elements, height: auto has similar properties:

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-bottom: 1px;
  border-bottom: 1em solid;
  padding-bottom: 1rem;
}

Here the effective height is 100% - 1px - 1em - 1rem.

참고URL : https://stackoverflow.com/questions/16034397/css-calc-alternative