2

ヘッダー、サイドバー、コンテンツdivがあります。

ヘッダーは上部にドッキングされ、そこで固定されています。サイドバーは左側に固定されています。これで、画面の3/4が右側に空き容量があります。そこに配置したいコンテンツdivがあります。その3/4のスペースの中央に配置する必要があります。

これがサイドバーとコンテンツdivの私のコードです。

CSS：

html,body {
    height:100%;
}
#sidebar {
    float: left;
    width: 300px;
    background: #fff;
    background: rgba(225,225,225,0.2);
    height:100%;
}
#sidebarTop {
    height:100%;
    background-color: #eee;
    padding:20px 50px;
    border-bottom:0.15em solid rgb(229,229,229);
    background: rgba(225,225,225,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0px 1px rgba(255,255,255,0.3), inset 0px 0px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset -10px 0px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#content {
    margin: 0 auto;
    display:block;
    width:400px;
    margin-top:100px;
    height:900px;
    background:#FFF;
    -webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
    -moz-box-shadow:    0px 0px 30px rgba(255, 255, 255, 1);
    box-shadow:         0px 0px 30px rgba(255, 255, 255, 1);
}

これがサイドバーとコンテンツdivのHTMLコードです。

<div id="sidebar">
    <div id="sidebarTop">
        ....
    </div>
</div>
<div id="content">
    TEST
</div>

問題はここにあります。サイドバーを無視してコンテンツdivを100px下（margin-top：100px）にプッシュする代わりに、サイドバーも同じレベルに下げます。

私の目標は、サイドバーとヘッダーが残りを埋めた後に残った画面スペースの3/4に、そのdivを垂直方向と水平方向の両方の中央に配置することです。

どんな助けでも大歓迎です！

4

4 に答える 4

2

に追加float:left;し#contentます。

#content {
    margin: 0 auto;
    width:400px;
    margin-top:100px;
    height:900px;
    background:#FFF;
    -webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
    -moz-box-shadow:    0px 0px 30px rgba(255, 255, 255, 1);
    box-shadow:         0px 0px 30px rgba(255, 255, 255, 1);
}

次のようにする必要があります。

#content
{
    margin:100px auto 0;
    width:400px;
    height:900px;
    background:#fff;
    -webkit-box-shadow:0 0 30px #fff;
    -moz-box-shadow:0 0 30px #fff;
    box-shadow:0 0 30px #fff;
    float:left;
}

更新しました：

CSS

html,
body
{
    height:100%;
}
#sidebar
{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    background-color:#758;
}
#content
{
    margin-left:-50px;
    position:absolute;
    top:100px;
    left:50%;
    width:400px;
    height:900px;
    background:#758;
}​

HTML

<div id="sidebar">
    "fixed" sidebar
</div>
<div id="content">
    "horizontally centered" content
</div>​

デモ

更新 2:

CSS

#wrapper
{
    position:absolute;
    top:100px;
    left:300px;
    right:0;
    height:900px;
}
#content
{
    margin:0 auto;
    width:400px;
    height:100%;
    background:#758;
}

HTML

<div id="sidebar">
    "fixed" sidebar
</div>
<div id="wrapper">
    <div id="content">
        "horizontally centered" content
    </div>
</div>​​​​​​​​​​

デモ 2

于 2012-08-12T22:04:20.030 に答える
0

この方法で試すことができます:
CSS:

html,body {
    height:100%;
}
#sidebar {
    border: 2px solid yellow; /*Added to show the box-model*/

    float: left;
    width: 25%;
    background: #fff;
    background: rgba(225,225,225,0.2);
    height:100%;
}
#sidebarTop {
    border: 2px solid black; /*Added to show the box-model*/

    height:100%;
    background-color: #eee;
    padding:20px 50px;
    border-bottom:0.15em solid rgb(229,229,229);
    background: rgba(225,225,225,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0px 1px rgba(255,255,255,0.3), inset 0px 0px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset -10px 0px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#foo {
    border: 2px solid pink; /*Added to show the box-model*/

    margin-top: 100px;
    margin-left: 27%;
    width: 73%;
}
#content {
    border: 2px solid green; /*Added to show the box-model*/

    margin: 0 auto;
    display:block;
    width:400px;
    /*margin-top:100px;*/ /*this can be deleted*/
    height: 100%;
    background:#FFF;
    -webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
    -moz-box-shadow:    0px 0px 30px rgba(255, 255, 255, 1);
    box-shadow:         0px 0px 30px rgba(255, 255, 255, 1);
}

そしてHTML：

<div id="sidebar">
    <div id="sidebarTop">
        ....
    </div>
</div>

<div id="foo">
    <div id="content">
        TEST
    </div>
</div>
于 2012-08-12T22:18:09.033 に答える
0 
#sidebarTop {
    margin: 0 auto;
}
于 2012-08-12T22:21:32.877 に答える
0

次のように「center」タグを簡単に使用できます。

<div id="content">
<center>
    TEST
</center>
</div>
于 2012-08-13T03:10:34.843 に答える