5448


cssの`table`と`table-
cell`を使ってdivを横に並べ、さらに入れ子にしたdivの高さを揃えたいです。下のsnippetで、赤い枠線の高さを左側と右側で同じにしたい。  
左側の高さは内側の要素によって変わるので、`height`を明示的に指定することはできません。  
JavaScriptを使用せずにcssのみで可能でしょうか？

[code]

    .table {
      display: table;
      width: 100%;
    }
    .table > div {
      display: table-cell;
      width: 50%;
      padding: 10px;
      border: 1px solid #000;
    }
    .table > div > div {
      height: 100%;  /* 指定しても効果なし */
      padding: 10px;
      border: 1px solid #F00;
    }
[/code]

[code]

    <div class="table">
        <div>
            <div>
                <p>左側</p>
                <p>左側</p>
                <p>左側</p>
             </div>
        </div>
    
        <div>
            <div>
                <p>右側</p>
            </div>
        </div>
    </div>
[/code]


CC BY-SA 3.0
2015-01-27T14:28:44.907
5442
2015-01-27T15:53:30.070
2015-01-27T15:38:07.893
3925
3925
question
css html
divの高さを揃えたい


CSSを以下のように変更することで対応できます。

  * `.table`に`table-layout: fixed`を指定し、さらに`height`を指定
  * `.table > div`に`height: 100%`を指定

参考サイト: [[CSS]要素を横並びに配置できる display:table-cell
の基本的な使い方と注意点](http://www.webantena.net/css/display-table-cell/)

[code]

    .table {
      display: table;
      table-layout: fixed;
      width: 100%;
      height: 100px;
    }
    .table > div {
      display: table-cell;
      width: 50%;
      height: 100%;
      padding: 10px;
      border: 1px solid #000;
    }
    .table > div > div {
      height: 100%;
      padding: 10px; /* IE11, Firefox35ではこのpaddingによってはみ出る */
      border: 1px solid #F00;
    }
[/code]

[code]

    <div class="table">
        <div>
            <div>
                <p>左側</p>
                <p>左側</p>
                <p>左側</p>
             </div>
        </div>
    
        <div>
            <div>
                <p>右側</p>
            </div>
        </div>
    </div>
[/code]


CC BY-SA 3.0
2015-01-27T15:38:18.487
5448
2015-01-27T15:53:30.070
2015-01-27T15:53:30.070
3160
3160
5442
answer