Css 如何使三列占据整个页面的高度？_Css

Css 如何使三列占据整个页面的高度？

css

Css 如何使三列占据整个页面的高度？,css,Css,我有一个设置了3列的页面：一个主内容div，两边各有一个阴影/边框示例如下：我需要两边的“阴影”div进入页面底部。我该怎么做示例HTML <div id="wrapper"> <div id="left"></div> <div id="main"> <div id="content"></div> </div> &

我有一个设置了3列的页面：一个主内容div，两边各有一个阴影/边框

示例如下：

我需要两边的“阴影”div进入页面底部。我该怎么做

示例HTML

 <div id="wrapper">
        <div id="left"></div>
        <div id="main">
            <div id="content"></div>
        </div>
        <div id="right"></div>  
    </div>

如果“阴影”div有

位置：fixed

，它们将保持100%的高度。但是，这可能会模糊部分内容，右侧阴影将与左侧对齐。要解决此问题，请使右div的

left

值等于两个div组合的宽度，并向主div添加一个左边距

我给两边一个容器。。。像这样：

<html>
<body>
    <div id="wrapper">
        <div id="sides_container">
            <div id="left">Left Banner</div>
            <div id="right">Right Banner</div> 
            <div id="main">
                <div id="content">Hello</div>
            </div>

        </div>
    </div>
</body>

html, body {height: 100%}
#wrapper {height: 100%}
#sides_container{width:360px; margin-left:auto; margin-right:auto; background:#555;}
#left {background: #555; width: 30px; height: 100%; float: left}
#main {background: #999; width: 300px; margin-right:auto; margin-left:auto;}
#content {height: 2000px}
#right {background: #555; width: 30px; height: 100%; float: right;}

我也喜欢，对不起。。。

html, body {height: 100%}
#wrapper {height: 100%}
#sides_container{width:360px; margin-left:auto; margin-right:auto; background:#555;}
#left {background: #555; width: 30px; height: 100%; float: left}
#main {background: #999; width: 300px; margin-right:auto; margin-left:auto;}
#content {height: 2000px}
#right {background: #555; width: 30px; height: 100%; float: right;}