代码之家 › 专栏 › 技术社区 › fmsf

如何在CSS中执行宽度=100%-100px?

css html

119

fmsf · 技术社区 · 16 年前

在CSS中,我如何执行以下操作:

width: 100% - 100px;

我想这很简单,但很难找到证明这一点的例子。

18 回复 | 直到 8 年前

217

Community Mohan Dere 8 年前

现代浏览器现在支持:

width: calc(100% - 100px);

要查看支持的浏览器版本签出列表,请执行以下操作: Can I use calc() as CSS unit value?

有一个jquery回退: css width: calc(100% -100px); alternative using jquery

Bob 14 年前

你能用 margin-left: 50px; 和 margin-right: 50px; 里面 <div> 具有 width: 100%; ?

barÄ±Å çÄ±racÄ± 8 年前

你可以试试这个…

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

VW:视区宽度

vh:视区高度

aleemb 16 年前

您需要有一个容器来存放您希望为100%-100px的内容分区。

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

您可能需要在最后一个 </div> 如果内容分区溢出。

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

Nikunj Madhogaria 10 年前

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

tvanfosson 16 年前

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

Artur Loginov 10 年前

使用引导面板,我在寻找如何将“删除”链接放置在头面板中,而头面板不会被长邻元素遮挡。解决方案如下:

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

当然,您可以根据缩进修改“top”和“right”值。 Source

Matthew Strawbridge 8 年前

只有当我检查了所有的空间后,它才开始对我起作用。所以,它不是这样工作的: width: calc(100%- 20px) 或 calc(100%-20px) 完美配合 width: calc(100% - 20px) .

Tina Orooji 16 年前

你能做到吗?

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

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

Josh Bush 16 年前

外部分区上的填充将获得所需的效果。

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

Dave 12 年前

对于这个常见的场景,有两种技术可以派上用场。每个都有其缺点,但有时两者都有用。

框大小:边框框 在项的宽度中包括填充和边框宽度。例如,如果使用20px 20px填充和1px边框将DIV的宽度设置为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;
}

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

当然,这两种方法都不完美,因为元素的宽度实际上是100%,而不是100%-100px(不过子级的DIV可能是100%)。绝对定位绝对不能用在任何情况下,但通常是可以的,只要家长的高度设置。

Boris Guéry 16 年前

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

hannson 16 年前

你在使用标准模式吗?我想这个解决办法取决于它。

如果您要制作两列,可以这样做:

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

Derek ææåå¤« 13 年前

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

Jon 13 年前

你可以研究使用 LESS 这是一个JavaScript文件,它预处理您的CSS,以便您可以将逻辑和变量包含到您的CSS中。以你的例子来说,用更少的篇幅 width: 100% - 100px; 为了达到你想要的目标:)

-1

Praveen Angyan 16 年前

简单的答案是你不在CSS中这样做。Internet Explorer支持称为CSS表达式的东西,但这不是标准的,而且绝对不受其他浏览器(如Firefox)的支持。

你最好用JavaScript来完成这项工作。

-1

Traingamer 16 年前

你不能。

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

-1

MichaÅ PerÅakowski 10 年前

这工作:

margin-right:100px;
width:auto;