3

我想知道如何在 div 中放置 100% 高度的table-celldiv。我尝试给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>

在此我想知道如何将 100% 高度的 div(.inner) 放置在table-cell div( .npv) 内。它仅在 Chrome 中占据 100% 的高度，在 IE 和 Mozilla 中没有。我想知道它在 ie 和 Mozilla 中失败的原因。是否可以使用 CSS 中的任何其他方法来实现相同的目标？如果是，那怎么办？

4

1 回答 1

-2

为了使table-cell元素正常工作，它们需要被放置在table-row元素内部，而这些元素在元素内部table。

如规范中所述，如果省略其中一些元素，浏览器会将它们包裹在所需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/

于 2013-10-08T10:36:54.603 回答