CSS实现{Width：100％-150px}

Question

我有一个带有侧面导航的站点，我希望屏幕的其余部分充满图像，侧面导航位于左侧，宽度为150px。

理想情况下，id喜欢将全屏图片设置为，width:100% -150px;但我很确定这不是正确的CSS。

有没有办法达到同样的效果？我不能使用，width:90%;因为在更宽的屏幕上150px更像是宽度的5％，而不是10％。

Answer 1

实际上-是的！（使用css3）

width: calc(100% -150px);
width: -moz-calc(100% - 150px);
width: -webkit-calc(100% - 150px);

有效，但仅适用于最现代的浏览器... caniuse

如果您不想使用此功能，则可以使用margin创建偏移量：margin-left:150px;。但是，这需要一个宽度为100％的父元素，并且您的图片必须是块级元素（display:block）。

另一种选择是使用box-sizing。这样，您可以选择另一个框模型，该模型不计算元素宽度中的边距和内边距。这也有助于某些典型的“我需要100％宽度-Xpx边框”情况。

为了回应@BerkerYüceer的评论-您还可以在calc中使用动态值，如下所示：

/* declare css variable */
--leftmargin:150px;

/* use the variable like following */
calc(100% - var(--leftmargin));