html - 如何在 CSS 的内容中留出 12 像素的空白并从内容中删除 12 像素？

Question

我正在尝试制作一个页面，该页面的左边距为 12 像素。我想将背景灰色设置为 12px(不管这个)。

在左侧设置 12px 左边距后，我想将所有其他屏幕尺寸分配给容器。

参见 jsfiddle http://jsfiddle.net/7vzSQ/

我想要的是:假设将来如果我给我的页面一个背景并且左边的 12px 是白色边距那么有没有人知道一个技巧，这样 .container 将获得所有屏幕尺寸(除了我通过 margin-left 设置的 12px 边距)

<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                test
            </div>
        </hgroup>
    </header>
    <div class="content">
        <div class="logo">

        </div>
    </div>
    <footer>

    </footer>
</div>

有人检查 http://jsfiddle.net/7vzSQ/7/embedded/result/我已经更新了三个背景，但不知道为什么它没有出现在页面中。

我这样做的主要目的是我可以将所有宽度 (100% -12px) 赋予 .container。如果我付出 100%，那是行不通的。我试过 css3 的计算功能没有用。我尝试 calc(100%+ 12px) 工作但 calc(100% - 12px) 不工作(带负号)。

有没有人猜到它会起作用。

Answer 1

如果你想超酷，你可以使用calc :

#container{
  margin-left:12px;
  width: 100%;              /* fallback for non-supporters, produces scrollbar */
  width:    -moz-calc(100% -12px); 
  width: -webkit-calc(100% -12px);
  width:         calc(100% -12px); 
}

然而，这会取消所有版本 8 之前的 IE 用户和那些可怜的 Opera 用户的资格:-D(请参阅 MDN-Compat 列表或 caniuse )。

如果你想非常老派，你可以使用绝对定位(遇到溢出问题)

#container{
    position:absolute;
    left:12px;right:0;
}

还有一点老派，你使用包装元素:

#outerwrapper{
     padding-left:12px;
}
#container{
     width:100%;
}

带有标记:

<div id="outerwrapper">
   <div id="container">
   </div>
</div>