html - Firefox+IE - テーブルセルの div 内に高さ 100% の div を配置する方法

Question

高さ 100% の div を div 内に配置する方法を知りたいですtable-cell。divに渡してみましdisplay:inline-block; width:100%;height:100%;たが、Chrome では問題なく動作しており、Mozilla と IE に問題があります。

フィドルは http://jsfiddle.net/kQM74/2/です

HTMLコードは

<div class="container">
    <div class="header width100p">
        <h2>Header</h2>
    </div>
    <div class="content width100p">
        <div class="width25p npv">
            <div class="width100p inner">
                <p>navigation</p>
                <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </p>
            </div>  
        </div>
        <div class="width74p rtb">
            <div class="width100p inner">
                <div class="width100p ql">
                    <p>div one</p>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                    </p>
                </div>
                <div class="width100p mtbs">
                    <p>div two</p>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                    </p>
                </div>
                <div class="floatL width100p widdiv">
                    <div class="floatL width100p">
                        <div class="floatL width40p incont">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                        <div class="floatL width40p incont">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                    </div>
                    <div class="floatL width100p">
                        <div class="floatL width40p incont">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                        <div class="floatL width40p incont">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>                      
    </div>
    <div class="footer width100p">
        <h2>Footer</h2>
    </div>
</div>

それぞれのスタイルは次のとおりです。

<style>
*,html{
    margin: 0;
    padding: 0;
}

html,body,.content{
    height: 100%;
}

.container{
    width:960px;
    margin:20px auto;
}

.header h2,.footer h2{
    text-align: center;
}

.floatL{
    float: left;
}

.floatR{
    float: right;
}

.clear{
    clear:both;
}

.width100p{
    width: 100%;
}

.width25p{
    width: 25%;
}

.width74p{
    width: 74%;
 }

.header,.footer,.content{
    border:1px solid #000;
}

.npv{
    border-right: 1px solid #000;
}

.ql,.mtbs{
    border-bottom: 1px solid #000;
}

.content{
    display: table;
    behavior: url(display-table.min.htc);
}

.npv, .rtb{
    display: table-cell; 
    -dt-display: table-cell;
}

.inner {
    width: 100%;
    display: inline-block;
    height: 100%;
}

.width40p{
    width: 40%;
}

.incont{
    margin: 4%;
    background: #ccc;
    border:1px solid red;
}
</style>

table-cell divこれで、高さ 100% の div(.inner) を( )内に配置する方法を知りたいです.npv。100% の高さを占めているのは Chrome だけで、IE や Mozilla ではありません。ie と Mozilla の両方で失敗した理由を知りたいです。CSSで他の方法を使用して同じことを達成することは可能ですか? もしそうなら、どのように？