css实现{Width:100% -150px}

Question

我有一个带有侧边导航的网站，我希望屏幕的其余部分充满图像，侧边导航在左侧，宽度为 150 像素。

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

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

Answer 1

对于非position:static 元素，您可以尝试设置right: 150px;

Answer 2

事实上 - 它是！ （使用 css3）

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

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

如果你不想使用这个，你可以使用边距来创建一个偏移量：margin-left:150px;。然而，这需要一个宽度为 100% 的父元素，并且您的图像是一个块级元素 (display:block)。

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

响应@BerkerYüceer 的评论 - 您还可以在计算中使用动态值，如下所示：

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

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

Answer 3

演示：http://jsfiddle.net/MY6Z9/

#content { margin-left:150px }

假设您的 #content 项目是一个 display:block 元素，默认情况下，它将填充可用宽度。

---

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

#content {
  background:url(myimage.jpg) no-repeat;
  background-size:100% auto; 
} 

演示：http://jsfiddle.net/MY6Z9/5/

Answer 4

您可以使用calc() 仅使用 CSS3 来获得您想要的。

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

你可以看到example here

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

其他参考：https://developer.mozilla.org/en/CSS/-moz-calc

Answer 5

您可以在#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;
}