html - 获得 3 个 div 以同样填充父级

Question

我有一个边栏（侧边栏），我试图将它分成 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;
}

Answer 1

您只需将#sidebar孩子的高度设置为 100%/3 = 33.333%，但要实现这一点，您还需要将高度设置html和body标记为 100%：

body,
html {
  height: 100%;
}

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

大多数情况下，您必须对父 DIV 应用 100% 的高度才能使其正常工作。

Answer 2

你的父元素的高度是自动的，子元素是 100%。因此，您需要定义父元素高度，以便将子元素定义为 100%。

你的父元素（#sidebar）有 100% 的高度。

我写了一个 jsfiddle，所以你可以看到我在父元素上 100% 高度的观点。父元素设置为 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;
                 }