我怎么能在CSS中做width = 100％ – 100px？
在CSS中，我该如何做这样的事情：
width: 100% - 100px; 我想这是相当简单的，但要find这样的例子有点难。
现代浏览器现在支持：
width: calc(100% - 100px);
要查看支持的浏览器版本列表，请参阅： 我可以使用calc（）作为CSS单位值吗？
有一个jQuery的后备： CSS宽度：计算（100％-100像素）; 替代使用jQuery
你可以用margin-left: 50px;嵌套div吗margin-left: 50px; 和margin-right: 50px; 在一个width: 100%;的<div>里面width: 100%; ？
你可以试试这个…
<!--First Solution--> width: calc(100% - 100px); <!--Second Solution--> width: calc(100vh - 100px);
你需要有一个容器为你的内容div，你希望是100％-100像素
#container { width: 100% } #content { margin-right:100px; width:100%; } <div id="container"> <div id="content"> Your content here </div> </div>
如果内容div溢出，则可能需要在最后一个</div>之前添加清除div。
<div style="clear:both; height:1px; line-height:0"> </div>
我的代码，它适用于IE6：
<style> #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;} </style> <div id="container"> <div id="header">header</div> <div id="mainContent"> <div id="sidebar">left</div> <div id="content">right 100% - 100px</div> <span style="display:none"></span></div> </div>
将身体边距设置为0，将外部容器的宽度设置为100％，并使用具有50px左右边距的内部容器似乎可行。
<style> body { margin: 0; padding: 0; } .full-width { width: 100%; } .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>
使用引导面板，我正在寻求如何将“删除”链接放在标题面板，这不会被长邻居元素遮蔽。 这里是解决scheme：
HTML：
<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>
CSS：
.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; }
当然，您可以根据您的缩进来修改“顶”和“右”值。 资源
你可以做：
margin-right: 50px; margin-left: 50px;
编辑：我的解决scheme是错误的。 由Aric TenEyck发布的解决schemebuild议使用宽度为100％的div，然后使用边距嵌套另一个div似乎更加正确。
外部div上的填充将获得所需的效果。
<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>
有两种技术可以派上用场。 每个人都有他们的缺点，但有时可以是有用的。
框的大小：边框包括项目宽度的填充和边框宽度。 例如，如果将20px的20px填充和1px的边框的宽度设置为100px，则实际宽度将为142px，但使用边框时，填充和边距均在100px内。
.bb{ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; width: 100%; height:200px; padding: 50px; }
这里有一个很好的文章： http : //css-tricks.com/box-sizing/这里是一个小提琴http://jsfiddle.net/L3Rvw/
然后是绝对的
.padded{ position: absolute; top: 50px; right: 50px; left: 50px; bottom: 50px; background-color: #aefebc; }
既不是完美的当然，盒子大小不完全适合的问题，因为元素实际上是100％的宽度，而不是100％-100像素（但小孩的div）。 绝对定位绝对不能在任何情况下使用，只要设置父高度，通常是可以的。
CSS不能用于animation或对事件的任何样式修改。
唯一的方法是使用一个javascript函数，它将返回给定元素的宽度，然后，减去100px，并设置新的宽度大小。
假设你正在使用jQuery，你可以这样做：
oldWidth = $('#yourElem').width(); $('#yourElem').width(oldWidth-100);
并与本地的JavaScript：
oldWidth = document.getElementById('yourElem').clientWidth; document.getElementById('yourElem').style.width = oldWidth-100+'px';
我们假设你有一个css风格设置为100％;
你在使用标准模式吗？ 这个解决scheme取决于我的想法。
如果你想做2列你可以做这样的事情：
<div id="outer"> <div id="left"> sidebar </div> <div id="main"> lorem ispsum etc... </div> </div>
然后使用CSS来设置它的样式：
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; }
如果你不想要2列，你可能会删除<div id="left">
<div style="width: 200px; border: 1px solid red;"> <br> <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;"> <br> </div> <br> </div>
你可以看看使用LESS ，这是一个JavaScript文件，预处理你的CSS，所以你可以包括逻辑和variables到你的CSS。 所以对于你的例子，在LESS中，你会写width: 100% - 100px; 实现你想要的东西:)
只有当我检查所有的空间时，它才开始为我工作。 所以，它没有像这样： width: calc(100%- 20px)或calc(100%-20px)并且可以很好地处理width: calc(100% - 20px) 。
简短的答案是你不要在CSS中这样做。 Internet Explorer支持所谓的CSSexpression式，但这不是标准的，并且绝对不被其他浏览器如FireFox所支持。
你最好在JavaScript中做这个。
你不能。
但是，您可以使用边距来实现相同的结果。
这工作：
margin-right:100px; width:auto;
