blocks|key|3025179|text|在计算完成之前，先回退一步。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3025180|width:+98%25;+++++++++++++++/*+fallback+for+browsers+without+support+for+calc()+*/
width:+calc(100%25+-+1em);|code-block|syntax|javascript|3025181|请在此处查看更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/calc|offset|length|3025182|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/calc^0|0|0|A|1H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Just have a fallback before the calc will do the trick. </p>

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

<p>See more here <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc">https://developer.mozilla.org/en-US/docs/Web/CSS/calc</a></p>


blocks|key|2812533|text|box-sizing:+border-box几乎总是可以取代用于布局的计算规则，如calc(100%25+-+500px)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2812534|例如：|2812535|如果我有以下标记：|2812536|<div+class="sideBar">sideBar</div>
<div+class="content">content</div>|code-block|syntax|javascript|2812537|而不是这样做：(假设侧边栏的宽度是300px+)|2812538|.content+{
++width:+calc(100%25+-+300px);
}|2812539|执行以下操作：|2812540|.sideBar+{
+++++position:+absolute;+
+++++top:0;
+++++left:0;
+++++width:+300px;
}
.content+{
++++padding-left:+300px;
++++width:+100%25;
++++-moz-box-sizing:+border-box;
++++box-sizing:+border-box;
}|2812541|​|2812542|*+{
++margin:+0;
++padding:+0;
}
html,
body,
div+{
++height:+100%25;
}
.sideBar+{
++position:+absolute;
++top:+0;
++left:+0;
++width:+300px;
++background:+orange;
}
.content+{
++padding-left:+300px;
++width:+100%25;
++-moz-box-sizing:+border-box;
++box-sizing:+border-box;
++background:+wheat;
}|2812543|<div+class="sideBar">sideBar</div>
<div+class="content">content</div>|2812544|2812545|PS:我不能在IE5.5中工作(哈哈哈)，但它可以在IE8%2B，所有移动设备和所有现代浏览器(caniuse)中工作|BOLD|2812546|2812547|2812548|我刚刚在保罗·爱尔兰的博客中发现了this+post，他还展示了框大小作为简单calc()表达式的可能替代方案：(我的是粗体)|2812549|2812550|我最喜欢的边界框解决得很好的用例之一是列。我可能想用50%25或20%25的列划分我的网格，但想通过px或em添加填充。没有CSS即将到来的calc()这是不可能的…除非您使用边框。|blockquote|2812551|2812552|2812553|calc+NB：上面的技术看起来确实和相应的()语句是一样的。不过，这是有区别的。当使用calc()规则时，内容div的宽度的值实际上是100%25+-+width+of+fixed+div，但是使用上面的技术，内容div的实际宽度是完整的100%25宽度，但它看起来像是“填充”了剩余的宽度。(这可能足以满足大多数人在这里的需求)|2812554|也就是说，如果content+div的宽度实际上是100%25+-+fixed+div+width是很重要的，那么可以使用一种不同的技术--利用块格式化上下文--(参见here和here了解更多细节)：|2812555|1)浮动固定宽度的div|2812556|2)在content+div上设置overflow:hidden或overflow:auto|2812557|Demo|2812558|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/css3-boxsizing|1|http://www.paulirish.com/2012/box-sizing-border-box-ftw/|2|https://stackoverflow.com/a/1767270/703717|3|https://stackoverflow.com/a/11854515/703717|4|http://jsfiddle.net/danield770/T92Fk/316/^0|0|M|15|I|0|0|0|0|0|0|0|0|0|0|0|0|0|3|1A|7|0|0|0|0|H|9|1|0|0|1K|U|0|0|0|M|3W|1W|P|0|0|2R|P|M|2A|4|2|2F|4|3|0|0|C|0|0|1A|H|F|X|D|0|0|4|0|4|4|0^^$0|@$1|2|3|4|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2B|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|2D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|2E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|2F|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|2G|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|2H|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|2I|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|2J|8|@]|D|@]|E|$M|N]]|$1|10|3|11|5|L|7|2K|8|@]|D|@]|E|$M|N]]|$1|12|3|X|5|6|7|2L|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|2M|8|@$9|2N|A|2O|B|15]]|D|@$9|2P|A|2Q|1|2R]]|E|$]]|$1|16|3|-4|5|6|7|2S|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|2T|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|2U|8|@]|D|@$9|2V|A|2W|1|2X]]|E|$]]|$1|1A|3|-4|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|1D|7|2Z|8|@$9|30|A|31|B|15]]|D|@]|E|$]]|$1|1E|3|-4|5|6|7|32|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|33|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|6|7|34|8|@$9|35|A|36|B|15]|$9|37|A|38|B|C]]|D|@]|E|$]]|$1|1I|3|1J|5|6|7|39|8|@$9|3A|A|3B|B|15]|$9|3C|A|3D|B|C]]|D|@$9|3E|A|3F|1|3G]|$9|3H|A|3I|1|3J]]|E|$]]|$1|1K|3|1L|5|6|7|3K|8|@$9|3L|A|3M|B|15]]|D|@]|E|$]]|$1|1M|3|1N|5|6|7|3N|8|@$9|3O|A|3P|B|15]|$9|3Q|A|3R|B|C]|$9|3S|A|3T|B|C]]|D|@]|E|$]]|$1|1O|3|1P|5|6|7|3U|8|@$9|3V|A|3W|B|15]]|D|@$9|3X|A|3Y|1|3Z]]|E|$]]|$1|1Q|3|-4|5|6|7|40|8|@]|D|@]|E|$]]]|1R|$1S|$5|1T|1U|1V|E|$1W|1X]]|1Y|$5|1T|1U|1V|E|$1W|1Z]]|20|$5|1T|1U|1V|E|$1W|21]]|22|$5|1T|1U|1V|E|$1W|23]]|24|$5|1T|1U|1V|E|$1W|25]]]]

<p>Almost always <code>box-sizing: border-box</code> can replace a calc rule such as <code>calc(100% - 500px)</code> used for layout.</p>

<p>For example:</p>

<p>If I have the following markup:</p>

<pre><code>&lt;div class="sideBar"&gt;sideBar&lt;/div&gt;
&lt;div class="content"&gt;content&lt;/div&gt;
</code></pre>

<p>Instead of doing this: (Assuming that the sidebar is 300px wide)</p>

<pre><code>.content {
  width: calc(100% - 300px);
}
</code></pre>

<p>Do this:</p>

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

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sideBar"&gt;sideBar&lt;/div&gt;
&lt;div class="content"&gt;content&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>PS:</strong> I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (<a href="http://caniuse.com/css3-boxsizing" rel="noreferrer">caniuse</a>)</p>

<p><strong><a href="http://jsfiddle.net/danield770/T92Fk/233/" rel="noreferrer">Width Demo</a></strong></p>

<p><strong><a href="http://jsfiddle.net/danield770/T92Fk/315/" rel="noreferrer">Height Demo</a></strong></p>

<p>I just found <a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/" rel="noreferrer">this post</a> from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)</p>

<blockquote>
  <p>One of my favorite use-cases that border-box solves well is columns. I
  might want to divide up my grid with 50% or 20% columns, but want to
  add padding via px or em. <strong>Without CSS’s upcoming calc() this is
  impossible… unless you use border-box</strong>.</p>
</blockquote>

<p><strong>NB:</strong> The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be <code>100% - width of fixed div</code>, however with the above technique, the actual width of the content div is the full 100% width, yet it has <em>the appearance</em> of 'filling up' the remaining width. (which is probably good enough for want most people need here)</p>

<p>That said, if it <em>is important</em> that the content div's width is actually <code>100% - fixed div width</code>  then a different technique - which makes use of block formatting contexts - may be used (see <a href="https://stackoverflow.com/a/1767270/703717">here</a> and <a href="https://stackoverflow.com/a/11854515/703717">here</a> for the gory details):</p>

<p>1) float the fixed width div</p>

<p>2) set <code>overflow:hidden</code> or <code>overflow:auto</code> on the content div</p>

<h2><a href="http://jsfiddle.net/danield770/T92Fk/316/" rel="noreferrer">Demo</a></h2>


blocks|key|3025246|text|使用此|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3025247|++++.content
{
++++width:+100%25;
++++-moz-box-sizing:+border-box;
++++box-sizing:+border-box;
++++padding-right:+500px;
++++margin-right:+-500px;
}|code-block|syntax|javascript|3025248|entityMap^0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>use this</strong></p>

<pre><code>    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}
</code></pre>


blocks|key|190866|text|我花了3个小时的大部分时间尝试在andriod设备上解决这个问题，无法调整盒子大小，所以我将其链接到我的JS中，作为一个肮脏的解决办法……但是不需要jQuery！:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|190867|采用了andriod+2.3上的工作代码。|190868|<div+class="sessionDiv"+style="width:auto;">
<img>+
</div>
<div+class="sessionDiv"+style="width:auto;">
<img>+
</div>|code-block|syntax|javascript|190869|带有事件监听器的JS|190870|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%25+-+300px);+->+equivalent
++++++++while(i--)
++++++++{
++++++++++++titleBoxes[i].style.width+=+String(+sessWidth+%2B+"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
};|190871|希望这篇文章能帮助那些不能调整盒子大小的人！另外，我在使用ios时遇到了一些问题。|190872|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Just spent the best part of 3 hours trying to workaround this for a specific case on andriod devices, couldnt get box sizing to work so i've linked it into my JS as a dirty workaround... no jQuery required though! :) </p>

<p>Taken on working code on andriod 2.3.</p>

<pre><code>&lt;div class="sessionDiv" style="width:auto;"&gt;
&lt;img&gt; &lt;!-- image to resize --&gt;
&lt;/div&gt;
&lt;div class="sessionDiv" style="width:auto;"&gt;
&lt;img&gt; &lt;!-- image to resize --&gt;
&lt;/div&gt;
</code></pre>

<p>JS with event listeners</p>

<pre><code>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); -&gt; 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
};
</code></pre>

<p>Hope this helps anyone who cant get the box-sizing working!
PS I have experienced problems with ios using this... </p>


blocks|key|190902|text|将#menuLog+width更改为%25或px，您将看到魔术效果。适用于所有设备，甚至小于2.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|190903|​|190904|*{
	-moz-box-sizing:+border-box;
++++-webkit-box-sizing:+border-box;
++++box-sizing:+border-box;
}
#menuLog{
++width:30%25;
++/*width:300px;*/
	height:+60px;
	padding:+5px;
	background-color:+#ddd;
}
#menuLog+>+div[inline-log="1"]{
	display:+inline-block;
	vertical-align:+top;
	width:+100%25;
	height:+100%25;
	margin-right:+-60px;
}
#menuLog+>+div[inline-log="1"]+>+div[inline-log="1.1"]{
	margin-right:+60px;
	height:+100%25;
	background-color:+red;
}
#menuLog+>+div[inline-log="2"]{
	display:+inline-block;
	vertical-align:+top;
	width:+60px;
	height:+100%25;
}
#menuLog+>+div[inline-log="2"]+>+div[inline-log="2.1"]{
	display:+inline-block;
	vertical-align:+top;
	width:+55px;
	height:+100%25;
	background-color:+yellow;
	margin-left:5px;
}|code-block|syntax|javascript|190905|<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>|190906|190907|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Change #menuLog width with % or px and you will see magic. Works with every device even &lt; 2.3</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{
	-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 &gt; div[inline-log="1"]{
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	margin-right: -60px;
}
#menuLog &gt; div[inline-log="1"] &gt; div[inline-log="1.1"]{
	margin-right: 60px;
	height: 100%;
	background-color: red;
}
#menuLog &gt; div[inline-log="2"]{
	display: inline-block;
	vertical-align: top;
	width: 60px;
	height: 100%;
}
#menuLog &gt; div[inline-log="2"] &gt; div[inline-log="2.1"]{
	display: inline-block;
	vertical-align: top;
	width: 55px;
	height: 100%;
	background-color: yellow;
	margin-left:5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menuLog"&gt;
  &lt;div inline-log="1"&gt;
    &lt;div inline-log="1.1"&gt;
      One
    &lt;/div&gt;
  &lt;/div&gt;&lt;div inline-log="2"&gt;
     &lt;div inline-log="2.1"&gt;
      Two
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2812676|text|我想添加无计算、无边界框(即CSS2)的替代方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2812677|正常流块元素最初具有width:+auto，它实际上是包含块的宽度减去边距、边框和填充宽度。|offset|length|style|CODE|2812678|example+above可以在没有边框的情况下完成，简单地如下所示|2812679|.content+{
++++padding-left:+300px;
}|code-block|syntax|javascript|2812680|类似地，使用|2812681|.content+{
++margin-left:+1px;
++border-left:+1em+solid;
++padding-left:+1rem;
}|2812682|有效宽度为100%25+-+1px+-+1em+-+1rem。|2812683|对于绝对定位的元素，height:+auto具有类似的属性：|2812684|.content+{
++position:+absolute;
++top:+0;
++bottom:+0;
++margin-bottom:+1px;
++border-bottom:+1em+solid;
++padding-bottom:+1rem;
}|2812685|这里的有效高度是100%25+-+1px+-+1em+-+1rem。|2812686|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18570513/822138^0|0|A|B|0|0|D|0|0|0|0|0|5|N|0|A|C|0|0|8|N|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|J|3|K|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1M|8|@$D|1N|E|1O|F|G]]|9|@]|A|$]]|$1|W|3|X|5|L|7|1P|8|@]|9|@]|A|$M|N]]|$1|Y|3|Z|5|6|7|1Q|8|@$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>I wanted to add the no-calc, no-border-box (i.e., CSS2) alternative.</p>

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

<p>The <a href="https://stackoverflow.com/a/18570513/822138">example above</a> can be done, without border-box, simply as</p>

<pre><code>.content {
    padding-left: 300px;
}
</code></pre>

<p>Similarly, with</p>

<pre><code>.content {
  margin-left: 1px;
  border-left: 1em solid;
  padding-left: 1rem;
}
</code></pre>

<p>the effective width is <code>100% - 1px - 1em - 1rem</code>.</p>

<p>For absolutely positioned elements, <code>height: auto</code> has similar properties:</p>

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

<p>Here the effective height is <code>100% - 1px - 1em - 1rem</code>.</p>


<p>I am trying to dynamicly change the width of a div using CSS and no jquery. <strong>The following code will work</strong> in the following browsers: <a href="http://caniuse.com/calc" rel="noreferrer">http://caniuse.com/calc</a></p>

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

<p><strong>I want also support IE 5.5 and higher</strong>, i found the following: expression. Is this the correct usage:</p>

<pre><code>/* IE-OLD */
width: expression(100% - 500px);
</code></pre>

<p><strong>Can I also support Opera and the Android browser?</strong></p>


CSS Calc alternative

jQuery

我正在尝试使用CSS而不是jquery来动态地改变div的宽度。以下代码将在以下浏览器中运行：/* Firefox */width: -moz-calc(100% - 500px);/* WebKit */width: -webkit-calc(100% - 500px);/* Opera */width: -o-ca...

问CSS计算替代方案
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS计算替代方案EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS计算替代方案
EN