Css实现{宽度：100%-150px}

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

理想情况下，我想将全屏图像设置为

宽度：100%-150px
有没有办法达到同样的效果？我不能使用
宽度：90%在更宽的屏幕上，150px更像宽度的5%，而不是10%。
对于非
位置：static
元素，您可以尝试设置
right:150px
事实上，它是！（有css3）

可以，但只适用于最现代的浏览器

如果不想使用此选项，可以使用边距创建偏移：
marginleft:150px。但是，这需要一个100%宽度的父元素，并且图像必须是块级元素（
display:block
）

另一个选择是使用。这使您可以选择另一个长方体模型，该模型不计算元素宽度中的边距和填充。这在一些典型的“我需要100%宽度-Xpx边框”情况下也有帮助

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

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

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

演示：
#内容{左边距：150px}

假设您的
#内容
项是一个
显示：块
元素，默认情况下，该元素将填充可用宽度


如果希望单个图像填充宽度，而不是平铺，则可以在现代浏览器上使用背景图像和：

#内容{
背景：url（myimage.jpg）不重复；
背景尺寸：100%自动；
} 

演示：您只需使用CSS3即可获得所需内容

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

你可以看到一个

在IE9、Firefox和Google Chrome中运行良好

附加参考：
您可以在#image full div周围使用包装div来实现此目的：

#image-wrapper
{
    position:absolute;
    width:100%;
    padding-right:150px;
}

#image-full
{
    width:100%;
    background-image:url(...);
    /* ... */
}

#navigation
{
    position:absolute;
    width:150px;
}

在某些浏览器中，这将起作用：可能重复感谢，如果id使用左边距方法，我是否需要使用z索引将侧导航置于图像上方？@sam看一看phrogz demo，你不需要任何zindex。你能做一些类似calc（100%左边距）的事情吗？左边的空白是动态的…@BerkerYüceer你完全可以这样做！！使用预处理器（LESS/SASS）或本机css变量-我相应地编辑了我的答案。
#image-wrapper
{
    position:absolute;
    width:100%;
    padding-right:150px;
}

#image-full
{
    width:100%;
    background-image:url(...);
    /* ... */
}

#navigation
{
    position:absolute;
    width:150px;
}