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

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

html css

Html 如何在没有背景图像的情况下获得“中心柱”效果？,html,css,Html,Css,我正在设计一个网站布局，其中所有内容都放在一个固定宽度的中心栏中。我希望这个中央栏的背景颜色与页面的其他部分不同。我还希望中心柱从浏览器的顶部延伸到底部我能够使用尺寸为1000x1的背景图像成功地做到这一点，如下所示： html { background: #333333 url(./images/global/background.png) repeat-y center; } body { margin: auto; width: 1000px; } 这在大多

我正在设计一个网站布局，其中所有内容都放在一个固定宽度的中心栏中。我希望这个中央栏的背景颜色与页面的其他部分不同。我还希望中心柱从浏览器的顶部延伸到底部

我能够使用尺寸为1000x1的背景图像成功地做到这一点，如下所示：

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

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

这在大多数浏览器中都非常有效，但我更希望能够在没有图像的情况下完成

我曾尝试将html和body设置为高度：100%，然后给body一个背景色，但如果有足够的内容可以保证滚动，则背景的高度仅与浏览器的高度相等，当您向下滚动时，背景会留在后面

任何提示都将不胜感激

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

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

细节

详细信息。

解决方案是使用一个具有100%高度的包装器div和一个单独的内容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>

解决方案是使用一个具有100%高度的包装器div和一个单独的内容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>

这不是保罗真正想要的。他希望专栏能覆盖整页的高度。这只是覆盖了他已经有的宽度和中心部分。这不是保罗真正想要的。他希望专栏能覆盖整页的高度。这只是覆盖了他已经拥有的宽度和居中部分。这接近我想要的，但是颜色EF没有延伸到窗口的顶部，当滚动到底部时，在某些情况下也没有完全接触到窗口的底部。对我来说，在什么情况下，div不会延伸到视口的整个高度？另外：如果使用正确的doctype强制IE进入标准模式，则不需要文本align:center；文本对齐：左对齐；确保正文和html没有填充/空白。我在标记中做了一些修改，找出了我的问题所在。我页面上的最后一个元素在底部有一个边距。它现在工作得很好，谢谢。这接近我想要的，但是颜色EF不会延伸到窗口的顶部，当滚动到底部时，在某些情况下也不会完全接触到窗口的底部。对我来说，在什么情况下div不会延伸到视区的整个高度？另外：如果使用正确的doctype强制IE进入标准模式，则不需要文本align:center；文本对齐：左对齐；确保正文和html没有填充/空白。我在标记中做了一些修改，找出了我的问题所在。我页面上的最后一个元素在底部有一个边距。现在很好用，谢谢。