Question

在CSS中，我该怎么做：

width: 100% - 100px;

我想这很简单但是找到显示的例子有点难。

Answer 1

现代浏览器现在支持：

width: calc(100% - 100px);

要查看支持的浏览器版本结帐清单：Can I use calc() as CSS unit value?

有一个jQuery后备：css width: calc(100% -100px); alternative using jquery

Answer 2

您可以在margin-left: 50px; margin-right: 50px;内嵌入<div>和width: 100%;的div吗？

Answer 3

你可以试试这个......

＆＃13;

public void setFragment() {
    android.support.v4.app.FragmentTransaction transaction;
    transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.fragment_container, new LoginFragment());
    transaction.commit();
}

＆＃13;

vw：视口宽度

vh：视口高度

Answer 4

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

Answer 5

您需要为您的内容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>

Answer 6

只有当我检查了所有空格时才开始为我工作。所以，它不能像这样工作：width: calc(100%- 20px)或calc(100%-20px)并与width: calc(100% - 20px)完美配合。

Answer 7

使用bootstrap面板，我正在寻找如何放置＆＃34;删除＆＃34;标题面板中的链接，不会被长邻居元素遮挡。这是解决方案：

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

当然你可以修改＆＃34; top＆＃34;和＆＃34;对＆＃34;价值，根据你的缩进。 Source

Answer 8

将体边距设置为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>

Answer 9

你能做到：

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

修改：我的解决方案是错误的。 Aric TenEyck发布的解决方案建议使用宽度为100％的div然后使用边距嵌套另一个div似乎更正确。

Answer 10

在外部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>

Answer 11

对于这种常见情况，有两种技术可以派上用场。每个都有它们的缺点，但有时都很有用。

box-sizing：border-box 包括项目宽度中的填充和边框宽度。例如，如果将div的宽度设置为20px 20px填充，1px边框设置为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/而且这里有一个小提琴http://jsfiddle.net/L3Rvw/

然后是位置：绝对

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

http://jsfiddle.net/Mw9CT/1/

当然，两者都不是完美的，因为元素实际上是100％宽度而不是100％ - 100px（然而是一个子div），因此盒子大小并不完全符合问题。并且绝对定位绝对不能在任何情况下使用，但只要设置了父高度，通常就可以了。

Answer 12

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

如果您正在尝试制作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">

Answer 13

您可以查看使用LESS，这是一个预处理CSS的JavaScript文件，因此您可以在CSS中包含逻辑和变量。因此，对于您的示例，在LESS中您可以编写width: 100% - 100px;来完全达到您想要的效果：）

Answer 14

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

Answer 15

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％;

Answer 16

这有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer disable">
  <div id="inner1" class="inner disable">1</div>
  <div id="inner2" class="inner enable">2</div>
  <div id="inner3" class="inner enable">3</div>
</div>

<div id="result"></div>

Answer 17

你不能。

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

Answer 18

简短的回答是你不要在CSS中这样做。 Internet Explorer支持称为CSS表达式的东西，但这不是标准的，并且其他浏览器（例如FireFox）绝对不支持。

你最好用JavaScript做这件事。

如何在CSS中执行width = 100％ - 100px？

18 个答案: