Question

我正在设计一个网站布局，其中所有内容都保存在固定宽度的中心列中。我希望此中心列具有与页面其余部分不同的背景颜色。我还希望中心列从浏览器的顶部延伸到最底层。

我能够使用尺寸为1000x1的背景图像成功完成此操作，如下所示：

 html
{
    background: #333333 url(./images/global/background.png) repeat-y center;
}

body
{
    margin: auto;
    width: 1000px;
}

这在大多数浏览器中都很有用，但我真的更愿意在没有图像的情况下做到这一点。

我尝试将“html”和“body”设置为“height：100％”然后给“body”一个背景颜色，但是如果有足够的内容来保证滚动，则背景只有高度相等对于浏览器而言，当您向下滚动时，背景会停留在后面。

任何提示都表示赞赏。

Answer 1

解决方案是使用具有100％高度的包装div和单独的内容div，如果内部的内容足够长并且都设置了背景颜色，则将延伸。这是一个例子（在Firefox，Chrome和IE7中测试）：

<html>
    <head>
        <style type="text/css">
            html {height: 100%}
            body {
                height: 100%; 
                margin: 0; 
                text-align: center;//for IE7
            }
            div#wrapper { 
                background-color: #efefef;
                width: 720px;
                margin: 0 auto;
                height: 100%;
                text-align: left;
            }
            div#content {
                background-color: #efefef;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div style="height: 2000px">test</div>
            </div>
        </div>
    </body>
</html>

Answer 2

body { 
    text-align: center; 
    margin: 5em 0 0 0; 
    vertical-align: middle; 
}

#content { 
    width: 760px; 
    text-align: left; 
    margin: 0 auto; 
}

详情here。

如何在没有背景图像的情况下获得“中心列”效果？

2 个答案: