1

メインコンテンツdivと両側のシャドウ/ボーダーの3つの列で設定されたページがあります。

ここでの例：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 に答える