6

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

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

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

4

5 回答 5

8

事实上 - 它是！（使用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));
于 2012-06-19T15:00:49.417 回答
3

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

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

你可以在这里看到一个例子

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

附加参考：https ://developer.mozilla.org/en/CSS/-moz-calc

于 2012-06-19T15:03:35.237 回答
2

演示：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/

于 2012-06-19T15:03:06.967 回答
0

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

于 2012-06-19T15:00:41.727 回答
0

您可以在 #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;
}
于 2012-06-19T15:06:26.620 回答