1

脇（サイドバー）があり、3つのセクションに均等に分割しようとしています。外観は次のとおりです。

ここに画像の説明を入力してください

これは私のhtmlです：

        <aside id="sidebar">
            <div id="side_events">
                Events
            </div>
            <div id="side_trailer">
                Trailer
            </div>
            <div id="side_advertisement">
                Advertisement
            </div>                    
        </aside>

これは私のCSSの大部分です：

* {
    margin: 0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display: block;
}
body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    background-image:url('bg2.jpg');
}
#wrapper{
    max-width: 850px;
    display: -webkit-box; /*means this is a box with children inside*/
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
    background-color: #B137D6;
}
#body_div{
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    color:#000000;
}
#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1; 
    margin: 20px;
    padding: 3px;
}
#sidebar{
    width: 210px;
    height: 100%;
    margin: 20px;
    padding: 0px;
    background: #999999;
    border:#FF0000 1px solid;
}
#side_events,
#side_trailer,
#side_advertisement{
    height:33.333%;
}
#side_events{
    background:#102A50;
    display:block;
}
#side_trailer{
    background:#173B72;
    display:block;
}
#side_advertisement{
    background:#296CD0;
    display:block;
}
4

2 に答える 2

2

#sidebar子の高さを100％/ 3 = 33.333％に設定する必要がありますが、これを実現するには、高さを100％に設定してタグ付けする必要もありhtmlますbody。

body,
html {
  height: 100%;
}

#side_events,
#side_trailer,
#side_advertisement{
    height:33.333%;
}

ほとんどの場合、これを機能させるには、親DIVに100％の高さを適用する必要があります。

于 2013-02-02T03:40:00.310 に答える
0

親要素の高さは自動で、子要素は100％です。したがって、子要素を100％として定義するには、親要素の高さを定義する必要があります。

親要素（#sidebar）の高さは100％です。

親要素の高さが100％であるという私のポイントを確認できるように、jsfiddleを作成しました。親要素は100％に設定されていますが、100％から派生するものはありません。そこで、例のコンテナを高さを定義するように設定しました。 http://jsfiddle.net/rtLeM/

                  <!-- HTML -->
                 <div id="container">  
                   <aside id="sidebar">
                     <div id="side_events">
                       Events
                     </div>
                     <div id="side_trailer">
                       Trailer
                     </div>
                     <div id="side_advertisement">
                       Advertisement
                     </div>                    
                   </aside>
                 </div>

                 /* CSS */
                 #container{
                    height:300px;
                 }
                 #sidebar{
                    width:150px;
                    height:100%;

                 }
                 #side_events{
                    height:33%;
                    width:100%;
                    display:block;
                    background-color:#555;
                 }

                 #side_trailer{
                    height:33%;
                    width:100%;
                    display:block;
                    background-color:#999;
                 }

                 #side_advertisement{
                    height:33%;
                    width:100%;
                    display:block;
                    background-color:#333;
                 }
于 2013-02-02T03:26:17.067 に答える