css - 3 つの等しい高さの div "行" を含む 2 つの等しい列を取得するにはどうすればよいですか?

Question

2 つの div 列があり、右側の列には動的リストのコンテンツが含まれ、左側には行のように機能する 3 つの div が含まれています)。

2 つのメイン列の高さを等しくする方法はたくさんありますが、3 つの div の「行」もそれぞれ 33.33% の高さにする方法はありますか?

Answer 1

HTML コード:

header
<div id="wrapper">
    <div id="left_container">
        <div class="content">
            #1 left asd
        </div>
        <div class="content">
            #2 left asd
        </div>
        <div class="content">
            #3 left asd
        </div>
    </div>
    <div id="right_container">
        <div class="content">
            right asd
        </div>
    </div>
</div>
footer

このためのCSS

div {
    margin: 0;
    padding: 0;
    display: block;
    border: 1px solid #ccc;
    height: 10em; /* should be px or em */
    margin: -1px; /* size of border */
    font-size: 20px; /* modulate the height of div like: 20x10=200px */
}
#wrapper {
    width: 100%;
}
#wrapper:after {
    clear: both;
    display: block;
    content: ' ';
}
#left_container,
#right_container {
    float: left;
    width: 50%;
    height: 100%;
}
#left_container .content {
    height: 33.33%;
}
#right_container .content {

}

実際の例: http://jsfiddle.net/Z2hpu/2/

Answer 2

フレックスボックスは、高さを固定せずに、指定した数の要素でこれを行うことができます:

http://codepen.io/cimmanon/pen/Gmljd

.wrapper {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.a, .b {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  display: flex;
}

.a div, .b {
  border: 1px solid;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

<div class="wrapper">
  <div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <div class="b">
    b
  </div>
</div>