我有一个带有侧面导航的站点，我希望屏幕的其余部分充满图像，侧面导航位于左侧，宽度为150px。
理想情况下，id喜欢将整个屏幕图像设置为width:100% -150px;，但我很确定这不是正确的CSS。
有没有办法达到同样的效果？我不能使用width:90%;，因为在更宽的屏幕上150px会更像是宽度的5％，而不是10％。
最佳答案
实际上-是的! (使用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));
关于CSS实现{Width :100% -150px}，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11103728/