文章/答案/技术大牛

发布

社区首页 >问答首页 >将div width设置为100%减去一定数量的px

问将div width设置为100%减去一定数量的px
EN

Stack Overflow用户

提问于 2011-07-07 02:19:57

回答 5查看 16K关注 0票数 9

我在过去的几个小时里一直在网上寻找解决方案，但没有找到，所以我在这里

我需要div的宽度是100%减去left div的宽度。

因此，它左边的div保持相同的宽度(390px)，但另一个div根据分辨率调整其大小。我已经找到了解决方案，在它的两边都有一个固定宽度的div，但就是想不出来。

html

css

width

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-07-07 03:01:58

简单的解决方案：

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS：

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

这将允许你有一个固定的边栏宽度和一个全宽的内容区域。我已经用过很多次了，它就像一个护身符。

票数 10

Stack Overflow用户

发布于 2011-07-07 02:51:33

CSS目前不支持这种类型的计算(在Chromium 12/Ubuntu11.04中肯定不支持)，但是在CSS3中定义了一个calc()函数，它可以使用简单的数学函数来实现这种行为：

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

(上面的示例直接取自W3.org。)

我自己的(详尽的)测试显示：

+----------------+-------------------+
|  Browser       |  Ubuntu 11.04     |
+----------------+-------------------+
|  Chromium  12  |  Fails            |
|  Firefox  5    |  Fails            |
|  Opera  11.10  |  Fails            |
+----------------+-------------------+

以上结果是使用指定的浏览器和一个css calc() demo获得的，其代码如下：

HTML：

<div id="box">This is the box.</div>

CSS：

#box {
    width: calc(100% - 20%);
    background-color: #f90;
    font-weight: bold;
    color: #fff;
    line-height: 2em;
    text-align: center;
    margin: auto;
}

(如果有人想在他们的平台上的浏览器中运行上面的测试，并提供结果，或者在这个答案中编辑它们，那将是much非常感谢的。)

正如clairesuzy在评论中指出的那样：

看看caniuse，它可以在火狐中工作，如果你使用的是，那就是width: -moz-calc() ;)

事实上，在Firefox5(Ubuntu11.04)中，它确实起作用了(不过，其他供应商的前缀似乎对Opera或Webkit没有任何作用；遗憾的是)：Revised vendor-prefixed demo。

参考资料：

CSS3 Values and Units.

票数 8

Stack Overflow用户

发布于 2011-07-07 03:13:13

<div id="left">...</div>
<div id="content">...<br> more content</div>

#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}

浮动左边的div并在右边的div中创建一个新的块格式化上下文(overflow: hidden是这样做的一种方法)，这样它将占用剩余的空间

Example Fiddle

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6601097

复制

相似问题

问将div width设置为100%减去一定数量的px
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div width设置为100%减去一定数量的pxEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div width设置为100%减去一定数量的px
EN