Question

我设置了一个包含3列的页面：主内容div和两侧的阴影/边框。

我需要两边的“shadow”div来到页面底部。我怎么能这样做？

示例HTML

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

CSS示例

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

Answer 1

如果“影子”div具有position: fixed，则它们将保持100％的高度。但是，这可能会遮挡部分内容，而右阴影将与左侧对齐。要解决此问题，请将右侧div的left值等于两个div组合的宽度，并向主div添加左边距。

http://jsfiddle.net/rfPJC/

Answer 2

我给双方一个容器......就像这样：

<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>

那么CSS就像这样：

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;}

我也喜欢集中，对不起...... http://jsfiddle.net/uhJHF/

如何在页面的整个高度上制作三列？

2 个答案: