如何使 div 100% 宽度减去一定数量？

Posted 2023-02-24

【中文标题】如何使 div 100% 宽度减去一定数量？

【英文标题】：How to make a div 100% width minus a certain amount?

【发布时间】：2011-10-21 07:13:56

【问题描述】：

所以我有一个我想成为的 div：

100% 宽度（视口） - 150 像素

如何在 CSS 或 javascript 中显示它？

【问题讨论】：

这是 CSS 完全遗留下来的一件事，IMO 是一件非常糟糕的事情。 Mozilla 浏览器有一个 eval() 运算符（找不到文档），它可以满足您的需求，尽管我不确定它是否会执行百分比，因为这些百分比是在呈现页面时计算的。

你知道有什么变通方法吗？

【参考方案1】：

你的 div 的容器必须是position:relative（或绝对...但不是默认），并且 div 样式必须是这样的：

position:relative;
width:auto;
margin:0px 150px 0px 0px;

【讨论】：

我实际上最终做的是position:relative;width:auto;margin-left:150px(give or take a few pixels); but you got me on the right track :D

【参考方案2】：

您可以使用 jQuery $(window) 选择器来获取视口宽度并更改您想要的 div 的宽度

  var width = $(window).width();
  $("div").css("width", width-150);

【参考方案3】：

你可能想去查一下 CSS 样式

box-sizing: border-box;

通常情况下，100% 是针对内部大小计算的，如果您的盒子包含任何类型的填充或边框，这完全没有用。使用 box-sizing 时，计算边框外部为该大小。对于制作具有非零填充和边框正确排列的 % 大小的 div 非常有用。

【参考方案4】：

所有东西都放在一起...

http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/