如何在CSS中实现宽度=100%-100px？

在CSS中，我如何做这样的事情：

width: 100% - 100px;

我想这是相当简单的，但很难找到例子来证明这一点。

286663 次浏览
小开

简短的回答是，你不会在CSS中这样做。Internet Explorer支持所谓的CSS表达式，但这不是标准的，而且其他浏览器（例如Firefox）也肯定不支持。

您最好在JavaScript中执行此操作。

小开

你不能。

但是，您可以使用边距来实现相同的结果。

小开

你能做：

margin-right: 50px;
margin-left: 50px;

编辑：，我的解决方案是错误的。Aric Teneyck发布的解决方案建议使用宽度为100%的DIV，然后使用边距嵌套另一个DIV，这似乎更正确。

小开

能否将_为ABC_0、_为ABC_1的DIV嵌套到_为ABC_3的<div>中？

小开

CSS不能用于动画，或对事件进行任何样式修改。

唯一的方法是使用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%；

小开 
<div style="width: 200px; border: 1px solid red;">
<br>
<div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
<br>
</div>
<br>
</div>
小开

你需要为你的内容DIV准备一个容器，你希望它是100%-100px.

#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">&nbsp;</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>
小开

外部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>
小开

你用的是标准模式吗？我认为这个解决方案取决于它。

如果你想做两列，你可以这样做：

<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">。

小开

您可以考虑使用更少，这是一个JavaScript文件，它可以对CSS进行预处理，以便您可以在CSS中包含逻辑和变量。因此，对于您的示例，在LESS中，您将编写width: 100% - 100px;来实现您想要的：）

小开
最佳答案

现代浏览器现在支持：

width: calc(100% - 100px);

要查看支持的浏览器版本列表，请签出：我可以使用calc（）作为CSS单位值吗？

存在jQuery回退：CSS宽度：Calc（100%-100px）；使用jQuery的替代方案

小开

我的代码，它适用于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>

enter image description here

小开

对于这种常见的情况，有两种技术可以派上用场。每一种都有其缺点，但有时都是有用的。

框大小调整：border-box包括项目宽度中的填充和边框宽度。 例如，如果将具有20px 20px填充和1px边框的DIV的宽度设置为100px，则实际宽度将为142px，但对于border-box，填充和边距都在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/，这里有一篇关于ABC_1的文章。

然后是位置：绝对

.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}

http：//jsfiddle.net/mw9ct/1/.

当然，两者都不是完美的，框大小并不完全符合这个问题，因为元素实际上是100%宽度，而不是100%-100px（然而，子DIV将是）。绝对定位肯定不能在所有情况下使用，但只要设置了父高度，通常就可以使用。

小开

这是可行的：

margin-right:100px;
width:auto;
小开

你可以试试这个……

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

VW：视口宽度

VH：视口高度

小开

在使用引导面板时，我一直在寻找如何在标题面板中放置“删除”链接，这不会被长邻居元素所掩盖。这就是解决方案：

“ 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; }

当然，您可以根据您的缩进修改“顶部”和“右侧”值。源头

小开
只有当我检查所有的空间时，

它才开始对我起作用。 所以，它不是这样工作的：width: calc(100%- 20px)或calc(100%-20px)，并且与width: calc(100% - 20px)完美地工作。


提交答案