html – IE – 在表格行中使用100％高度

发布时间：2020-12-14 23:22:52 所属栏目：资源来源：网络整理

导读：我正在使用css表,其中最后一个表行的高度为100％ – 以填充剩余的高度. FIDDLE 这适用于我跨浏览器(包括IE). 但是,如果我然后在最后一个表格行添加一些固定高度的div(这是动态内容 – 我不知道它们中有多少)最后一个div有高度：100％ – 为了填满最后一个表

我正在使用css表,其中最后一个表行的高度为100％ – 以填充剩余的高度.

FIDDLE

这适用于我跨浏览器(包括IE).

但是,如果我然后在最后一个表格行添加一些固定高度的div(这是动态内容 – 我不知道它们中有多少)最后一个div有高度：100％ – 为了填满最后一个表格行. – 像这样：

FIDDLE –

这现在在IE中不起作用(即使是IE10)

我该怎么做才能在IE中工作？

(编辑：正如在评论中正确指出：它在任何浏览器中都不起作用 – 虽然在Chrome和Firefox中它看起来像是有效的 – 高度：第三行最后一个div的100％没有填满剩余高度,但占据第3行的完整高度……

所以我尝试在第3行使用表行： – FIDDLE …现在这适用于其他浏览器,但仍然无法在IE中运行！)

标记

<div class="table">
    <div class="row row1">row1</div>
    <div class="row row2">row2</div>
    <div class="row row3">
        <div class="row3a">row3a</div>
        <div class="row3b">row3b</div>
        <div class="row3c">row3c</div> <!-- in IE this doesn't fill the last row -->
    </div>
</div>

CSS

.table
{
    display: table;
    width: 600px;
    height: 300px;
}
.row
{
    display: table-row;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    height: 100%;
    background: yellow;
}
.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    height: 100%;
    background: brown;
}

解决方法

纯CSS,跨浏览器解决方案,不使用CSS表格布局.

我实际上建议你使用CSS表格布局,如果可以的话. (我不知道为什么你不想在你的行中,它完全没问题.)
或者flexbox布局,虽然它还没有在所有浏览器中正确实现..
– 我只是在评论中读到它在IE中没有对你有用,好吧：我的解决方案确实……即使使用IE8.

Working Fiddle

HTML：我正在使用我在评论中提到的额外包装器.

<div class="table">
    <div class="row1">row1</div>
    <div class="row2">row2</div>
    <div class="row3">
        <div class="Wrapper">
            <div class="row3a">row3a</div>
            <div class="row3b">row3b</div>
            <div class="row3c">row3c</div>
        </div>
    </div>
</div>

CSS :(大部分是如果背景)

.table
{
    width: 600px;
    height: 900px;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    background: yellow;
    position: relative;
}

.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    background: brown;
}

.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.table:before,.Wrapper:before
{
    content: '';
    height: 100%;
    float: left;
}

.row3:after,.row3c:after
{
    content: '';
    display: block;
    clear: left;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!