CSS 布局 - 具有弹性背景的 3 列答案

【问题标题】：CSS Layout - 3 column with stretchy backgroundCSS 布局 - 具有弹性背景的 3 列
【发布时间】：2012-04-21 06:25:31
【问题描述】：

我正在构建一个 3 列的流体布局，并且已经完成了 90%。我想知道隐含背景或侧边栏的最佳方式是什么 - 但是你想看看它。

我有一个很好的 box hack，它以我的主要内容区域为中心，现在我需要暗示你在两边看到的两条条纹，它们在各自的内部边框上有一个 1px 的小边框。

我可以创建一个 1px 高、1000 像素宽的条纹，但我觉得有更好的方法来做到这一点 - 可能使用纯 CSS？

我现在是在看 5 列布局，还是仍然是三列流体？

如果有人可以为这种布局风格提供一个好的模式或链接（它可能是当今最常见的，对吧？）我真的很喜欢它！

这是我当前的流体包装代码：

css：

body
    {
        margin: 10px 0px;
        padding: 0px;
        text-align: center;
    }
    #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
    }

HTML

<body>

<div id="siteWrapper">
</div>

</body>

【问题讨论】：

为了便于阅读，这里是该图片的链接：i.stack.imgur.com/aRw8T.jpg
manisheriar.com/holygrail/index.htm 可以为你工作
是的，好像可以修改它以满足我的需要；如果我能够设置内盒的宽度。我会试一试。谢谢！

标签： css fluid-layout

【解决方案1】：

body
{
    margin: 10px 0px;
    padding: 0px;
    text-align: center;
    background: whatevercolor;
}
 #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
        border-left: whatever;
        border-right: whatever;
    }

【讨论】：

假设他不想要侧边栏中的任何内容？？
侧边栏中没有内容，但它们应该会增长（？）是的，我很确定情况就是这样。这种布局的最佳做法是什么（似乎很常见......）