1

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

这里的例子：http: //jsfiddle.net/rfPJC/

我需要两侧的“影子”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;}
4

2 回答 2

1

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

http://jsfiddle.net/rfPJC/

于 2013-02-14T02:17:44.243 回答
1

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

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

于 2013-02-14T02:48:41.813 回答