Question

我想知道如何在table-cell div中放置100％高度的div。我尝试将display:inline-block; width:100%;height:100%;提供给div，但它在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（.npv）内放置100％高度的div（.inner）。它仅在Chrome中占据100％的高度而在IE和Mozilla中不占用。我想知道ie和Mozilla都失败的原因。是否可以使用CSS中的任何其他方法实现相同的功能？如果是，那怎么样？

Answer 1

要使table-cell元素正常工作，需要将它们放在table-row元素中，并将这些元素放在table元素中。

如specs here中所述，如果忽略其中一些元素，浏览器会将它们包含在所需的display类型的匿名元素周围。据说，这是Firefox失败的地方。

您可以尝试将所有元素包装在具有相应display类型的父级中 - 有些元素缺少table-row。

编辑：您需要为height:100%元素应用table-cell。这在我的FF 24.0中修复了不当行为。

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

活小提琴：http://jsfiddle.net/keaukraine/BtwTh/

Firefox + IE - 如何在table-cell div中放置100％高度的div

1 个答案: