Html 如何在 CSS 中实现 width = 100% - 100px？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/899107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I do width = 100% - 100px in CSS?
提问by fmsf
In CSS, how can I do something like this:
在 CSS 中，我该如何做这样的事情：
width: 100% - 100px;
I guess this is fairly simple but it is a bit hard to find examples showing that.
我想这相当简单，但很难找到说明这一点的例子。
回答by Chad
Modern browsers now support the:
现代浏览器现在支持：
width: calc(100% - 100px);
To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?
要查看支持的浏览器版本列表，请查看：Can I use calc() as CSS unit value?
There is a jQuery fallback: css width: calc(100% -100px); alternative using jquery
有一个 jQuery 回退：css width: calc(100% -100px); 使用 jquery 的替代方法
回答by Aric TenEyck
Could you nest a div with margin-left: 50px;and margin-right: 50px;inside a <div>with width: 100%;?
你能不能嵌套一个divmargin-left: 50px;和margin-right: 50px;内<div>用width: 100%;？
回答by bar?? ??rac?
You can try this...
你可以试试这个...
<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);vw: viewport width
vw：视口宽度
vh: viewport height
vh：视口高度
回答by lbsweek
my code, and it works for IE6:
我的代码，它适用于 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>
回答by aleemb
You need to have a container for your content div that you wish to be 100% - 100px
您需要为您希望为 100% - 100px 的内容 div 设置一个容器
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
You might need to add a clearing div just before the last </div>if your content div is overflowing.
</div>如果您的内容 div 溢出，您可能需要在最后一个之前添加一个清除 div 。
<div style="clear:both; height:1px; line-height:0"> </div>
回答by tvanfosson
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.
将正文边距设置为 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>
回答by Artur Loginov
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:
使用引导程序面板，我正在寻找如何在标题面板中放置“删除”链接，该链接不会被长邻居元素遮挡。这是解决方案：
html:
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:
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; }
Of course you can modify "top" and "right" values, according to your indentations. Source
当然，您可以根据缩进修改“顶部”和“右侧”值。来源
回答by Alina Babycheva
It started to work for me only when I checked all the spaces.
So, it didn't work like this: width: calc(100%- 20px)or calc(100%-20px)and perfectly worked with width: calc(100% - 20px).
只有当我检查所有空间时它才开始对我有用。所以，它不是这样工作的：width: calc(100%- 20px)或者calc(100%-20px)与width: calc(100% - 20px).
回答by Dave
There are 2 techniques which can come in handy for this common scenario. Each have their drawbacks but can both be useful at times.
对于这种常见情况，有两种技术可以派上用场。每个都有其缺点，但有时都可能有用。
box-sizing: border-boxincludes padding and border width in the width of an item. For example, if you set the width of a div with 20px 20px padding and 1px border to 100px, the actual width would be 142px but with border-box, both padding and margin are inside the 100px.
box-sizing：border-box包括一个项目宽度中的内边距和边框宽度。例如，如果您将 div 的宽度设置为 20px 20px padding 和 1px 边框为 100px，实际宽度将为 142px 但使用 border-box，padding 和 margin 都在 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;
}
Here's an excellent article on it: http://css-tricks.com/box-sizing/and here's a fiddle http://jsfiddle.net/L3Rvw/
这是一篇关于它的优秀文章：http: //css-tricks.com/box-sizing/，这里有一个小提琴http://jsfiddle.net/L3Rvw/
And then there's position: absolute
然后是位置：绝对
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}
Neither are perfect of course, box-sizing doesn't exactly fit the question as the element is actually 100% width, rather than 100% - 100px (however a child div would be). And absolute positioning definitely can't be used in every situation, but is usually okay as long as the parent height is set.
当然，两者都不是完美的，box-sizing 并不完全适合这个问题，因为元素实际上是 100% 宽度，而不是 100% - 100px（但是子 div 会是）。绝对定位绝对不能在所有情况下都使用，但只要设置了父高度，通常就可以了。
回答by Josh Bush
Padding on the outer div will get the desired effect.
在外部 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>
