blocks|key|1550252|text|简短的答案是，你不能在CSS中这样做。Internet+Explorer支持所谓的CSS表达式，但这不是标准的，并且肯定不被其他浏览器支持，例如FireFox。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550253|你最好用JavaScript来做这件事。|1550254|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>The short answer is you DON'T do this in CSS. Internet Explorer has support for something called CSS Expressions, but this isn't standard and is definitely not supported by other browsers like FireFox for instance.</p>

<p>You'd be better off doing this in JavaScript.</p>


blocks|key|1550317|text|你不能这么做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550318|但是，您可以使用边距来实现相同的结果。|1550319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>You can't.</p>

<p>You can, however, use margins to effect the same result.</p>


blocks|key|1550385|text|你能用margin-left:+50px;和margin-right:+50px;在<div>用width:+100%25;嵌套一个div吗？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1550386|entityMap^0|3|I|M|J|16|5|1C|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Could you nest a div with <code>margin-left: 50px;</code> and <code>margin-right: 50px;</code> inside a <code>&lt;div&gt;</code> with <code>width: 100%;</code>?</p>


blocks|key|1334930|text|<div+style="width:+200px;+border:+1px+solid+red;">
++++<br>
++++<div+style="margin:+0px+50px+0px+50px;+border:+1px+solid+blue;">
++++++++<br>
++++</div>
++++<br>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1334931|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div style="width: 200px; border: 1px solid red;"&gt;
    &lt;br&gt;
    &lt;div style="margin: 0px 50px 0px 50px; border: 1px solid blue;"&gt;
        &lt;br&gt;
    &lt;/div&gt;
    &lt;br&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1335001|text|你需要为你的内容div准备一个100%25+-+100px的容器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335002|#container+{
+++width:+100%25
}
#content+{
+++margin-right:100px;
+++width:100%25;
}

<div+id="container">
++<div+id="content">
++++++Your+content+here
++</div>
</div>|code-block|syntax|javascript|1335003|如果您的内容div溢出，您可能需要在最后一个</div>之前添加一个清除div。|offset|length|style|CODE|1335004|<div+style="clear:both;+height:1px;+line-height:0">&nbsp;</div>|1335005|entityMap^0|0|0|M|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You need to have a container for your content div that you wish to be 100% - 100px</p>

<pre><code>#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

&lt;div id="container"&gt;
  &lt;div id="content"&gt;
      Your content here
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>You might need to add a clearing div just before the last <code>&lt;/div&gt;</code> if your content div is overflowing.</p>

<pre><code>&lt;div style="clear:both; height:1px; line-height:0"&gt;&amp;nbsp;&lt;/div&gt;
</code></pre>


blocks|key|1550669|text|将正文边距设置为0，外部容器的宽度设置为100%25，并使用左右边距为50px的内部容器似乎是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550670|<style>
body+{
++++margin:+0;
++++padding:+0;
}

.full-width
{
++++width:+100%25;
}

.innerContainer
{
++++margin:+0px+50px+0px+50px;
}
</style>

<body>
++<div+class="full-width"+style="background-color:+#ff0000;">
++++<div+class="innerContainer"+style="background-color:+#00ff00;">
++++++content+here
++++</div>
++</div>
</body>|code-block|syntax|javascript|1550671|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Setting the body margins to 0, the width of the outer container to 100%, and using an inner container with 50px left/right margins seems to work.</p>

<pre><code>&lt;style&gt;
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
&lt;/style&gt;

&lt;body&gt;
  &lt;div class="full-width" style="background-color: #ff0000;"&gt;
    &lt;div class="innerContainer" style="background-color: #00ff00;"&gt;
      content here
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1335225|text|在外部div上填充将获得所需的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335226|<html>
<head>
<style>
++++#outer{
++++++++padding:+0+50px;
++++++++border:1px+solid+black;+/*for+visualization*/
++++}

++++#inner{
++++++++border:1px+solid+red;+/*for+visualization*/
++++}
</style>
</head>
<body>
<div+id="outer">
++++<div+id="inner">
++++++++100px+smaller+than+outer
++++</div>
</div>
</body>
</html>|code-block|syntax|javascript|1335227|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Padding on the outer div will get the desired effect.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;
        100px smaller than outer
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1550759|text|你在使用标准模式吗？我认为这个解决方案依赖于它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550760|如果你想创建2列，你可以这样做：|1550761|<div+id="outer">
++++<div+id="left">
++++++++sidebar
++++</div>
++++<div+id="main">
++++++++lorem+ispsum+etc...+
++++</div>
</div>|code-block|syntax|javascript|1550762|然后使用CSS设置样式：|1550763|div#outer
{
++++width:100%25;
++++height:+500px;
}

div#left
{
++++width:+100px;
++++height:+100%25;
++++float:left;
++++background:+green;
}

div#main
{
+++width:+auto;
+++margin-left:+100px;+/*+same+as+div#left+width+*/
+++height:+100%25;
+++background:red;
}|1550764|如果你不想要2列，你可以删除<div+id="left">|offset|length|style|CODE|1550765|entityMap^0|0|0|0|0|0|E|F|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Are you using standards mode? This solution depends on it I think.</p>

<p>If you're trying to make 2 columns you could do something like this:</p>

<pre><code>&lt;div id="outer"&gt;
    &lt;div id="left"&gt;
        sidebar
    &lt;/div&gt;
    &lt;div id="main"&gt;
        lorem ispsum etc... 
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Then use CSS to style it:</p>

<pre><code>div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}
</code></pre>

<p>If you don't want 2 columns you can probably remove <code>&lt;div id="left"&gt;</code></p>


blocks|key|1550802|text|您可以考虑使用LESS，这是一个预处理CSS的JavaScript文件，因此您可以在CSS中包含逻辑和变量。因此，对于您的示例，您只需编写width:+100%25+-+100px;即可实现您想要的效果:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1550803|entityMap|0|LINK|mutability|MUTABLE|url|http://lesscss.org/^0|1X|K|7|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>You can look into using <a href="http://lesscss.org/" rel="nofollow">LESS</a>, which is a JavaScript file that pre-processes your CSS so you can include logic and variables into your CSS. So for your example, in LESS you would write <code>width: 100% - 100px;</code> to achieve exactly what you wanted :)</p>


blocks|key|1550839|text|现代浏览器现在支持：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550840|width:+calc(100%25+-+100px);|code-block|syntax|javascript|1550841|要查看支持的浏览器版本列表，请查看：Can+I+use+calc()+as+CSS+unit+value?|offset|length|1550842|有一个jQuery回退：css+width:+calc(100%25+-100px);+alternative+using+jquery|1550843|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/calc|1|https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery?rq=1^0|0|0|I|Z|0|0|C|1I|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Modern browsers now support the:</p>

<pre><code>width: calc(100% - 100px);
</code></pre>

<p>To see the list of supported browser versions checkout: <a href="http://caniuse.com/calc" rel="noreferrer">Can I use calc() as CSS unit value?</a></p>

<p>There is a jQuery fallback: <a href="https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery?rq=1">css width: calc(100% -100px); alternative using jquery</a></p>


blocks|key|1335388|text|我的代码，它适用于IE6：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335389|<style>
#container+{margin:0+auto;+width:100%25;}
#header+{+height:100px;+background:#9c6;+margin-bottom:5px;}
#mainContent+{+height:500px;+margin-bottom:5px;}
#sidebar+{+float:left;+width:100px;+height:500px;+background:#cf9;}
#content+{+margin-left:100px;+height:500px;+background:#ffa;}

</style>

<div+id="container">
++<div+id="header">header</div>
++<div+id="mainContent">
++++<div+id="sidebar">left</div>
++++<div+id="content">right+100%25+-+100px</div>
++<span+style="display:none"></span></div>
</div>|code-block|syntax|javascript|1335390|​|1335391|📷|atomic|offset|length|1335392|1335393|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/717edb36f1735f200306fca52af3075f.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p>my code, and it works for IE6:</p>

<pre><code>&lt;style&gt;
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

&lt;/style&gt;

&lt;div id="container"&gt;
  &lt;div id="header"&gt;header&lt;/div&gt;
  &lt;div id="mainContent"&gt;
    &lt;div id="sidebar"&gt;left&lt;/div&gt;
    &lt;div id="content"&gt;right 100% - 100px&lt;/div&gt;
  &lt;span style="display:none"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><img src="https://i.stack.imgur.com/i7gKD.png" alt="enter image description here"></p>


blocks|key|1550916|text|这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550917|margin-right:100px;
width:auto;|code-block|syntax|javascript|1550918|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works:</p>

<pre><code>margin-right:100px;
width:auto;
</code></pre>


blocks|key|1335432|text|你可以试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335433|​|1335434|
width:+calc(100%25+-+100px);

width:+calc(100vh+-+100px);|code-block|syntax|javascript|1335435|1335436|vw:视口宽度|1335437|vh:视口高度|1335438|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can try this...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--First Solution--&gt;
width: calc(100% - 100px);
&lt;!--Second Solution--&gt;
width: calc(100vh - 100px);</code></pre>
</div>
</div>
</p>

<p>vw: viewport width</p>

<p>vh: viewport height</p>


blocks|key|1335494|text|在使用bootstrap面板时，我一直在寻找如何在标题面板中放置"delete“链接，这样就不会被较长的相邻元素所遮挡。下面是解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335495|html：|1335496|<div+class="with-right-link">
++++<a+class="left-link"+href="#">Long+link+header+Long+link+header</a>
++++<a+class="right-link"+href="#">Delete</a>
</div>|code-block|syntax|javascript|1335497|css：|1335498|.with-right-link+{+position:+relative;+width:+275px;+}
a.left-link+{+display:+inline-block;+margin-right:+100px;+}
a.right-link+{+position:+absolute;+top:+0;+right:+0;+}|1335499|当然，您可以根据缩进修改"top“和"right”值。Source|offset|length|1335500|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/w0mwuye7/^0|0|0|0|0|0|R|6|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Working with bootstrap panels, I was seeking how to place "delete" link in header panel, which would not be obscured by long neighbour element. And here is the solution:</p>

<p>html:</p>

<pre><code>&lt;div class="with-right-link"&gt;
    &lt;a class="left-link" href="#"&gt;Long link header Long link header&lt;/a&gt;
    &lt;a class="right-link" href="#"&gt;Delete&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }
</code></pre>

<p>Of course you can modify "top" and "right" values, according to your indentations. <a href="https://jsfiddle.net/w0mwuye7/" rel="nofollow">Source</a></p>


blocks|key|1335539|text|只有当我检查了所有的空间后，它才开始对我起作用。所以，它不是这样工作的：width:+calc(100%25-+20px)或calc(100%25-20px)，它与width:+calc(100%25+-+20px)完美地协同工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1335540|entityMap^0|10|N|1O|F|26|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>It started to work for me only when I checked all the spaces. 
So, it didn't work like this: <code>width: calc(100%- 20px)</code> or <code>calc(100%-20px)</code> and perfectly worked with <code>width: calc(100% - 20px)</code>.</p>


<p>In CSS, how can I do something like this:</p>

<pre><code>width: 100% - 100px;
</code></pre>

<p>I guess this is fairly simple but it is a bit hard to find examples showing that.</p>


How can I do width = 100% - 100px in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在CSS中，我如何做这样的事情：width: 100% - 100px;我想这是相当简单的，但是很难找到能证明这一点的例子。

问如何在CSS中实现width = 100% - 100px？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中实现width = 100% - 100px？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中实现width = 100% - 100px？
EN