Question

有时，我需要将页面的部分限制为固定宽度。但背景应该扩展所有可用空间。

使用CSS2，我曾经做过类似的事情（jsfiddle：http://jsfiddle.net/fniwes/wwVp4/）

的CSS：

#container { background-color: #ddd; }
#content { width: 300px; margin: 0 auto; }

HTML：

<div id="container">
    <div id="content">All the content inside container should be limited to 300px but the background should cover all the screen width</div>
</div>

这里的内容只是一个纯文本，但通常更为复杂。

如果没有额外的#content标签，有没有更好的方法来实现相同的结果？我不介意使用CSS3或仅支持Chrome或Firefox的东西。

只是为了澄清。我想删除#content标签。我希望标记是

<div id="container">
    All the content bla bla
</div>

（我想除了#container之外没有任何标签样式......也许这是不可能的，但是CSS3或其他提案中可能还有一些我不知道的新内容）

Answer 1

css3中有calc（）函数，你可以这样使用：

#container { background-color: #ddd; padding-left: calc(50% - 150px); padding-right:calc(50% - 150px);}

Answer 2

您是否反对使用容器div？你可以这样做：

#content { background-color: #ddd; width: 100%; margin: 0; padding: 0 50%; }

但我不会推荐它，最好的解决方案仍然是使用容器

使用CSS3固定宽度但可变背景

2 个答案: