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

Question

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

理想情况下，我喜欢在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-left:150px;。但是，这需要一个宽度为100％的父元素，而您的图像需要一个块级元素（display:block）。

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

Answer 2

您可以使用calc()仅使用CSS3获得所需内容。

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

您可以看到example here

在IE9，Firefox和谷歌浏览器中运行良好。

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

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

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

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;
}