Question

我有一个旁边（侧边栏），我试图将其分成3个部分。这是它的样子：

enter image description here

这是我的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%;
}

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

Answer 2

您父元素的高度为auto，子元素为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;
                 }

获得3个div同样填充父母

2 个答案: