5

我正在使用最后一个表格行高度为 100% 的 css 表格 - 以填充剩余的高度。

小提琴

这适用于我的跨浏览器（包括 IE）。

但是，如果我然后在最后一个表行中添加一些具有固定高度的 div（这是动态内容 - 我不知道其中有多少），最后一个 div 的高度为：100% - 为了填满最后一个表行。- 像这样：

小提琴-

这现在在 IE 中不起作用（甚至 IE10）

我必须做什么才能在 IE 中完成这项工作？

（编辑：正如评论中正确指出的那样：它在任何浏览器中都不起作用 - 尽管在 Chrome 和 firefox 中它看起来可以工作 - 第三行最后一个 div 的 height: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;
}
4

3 回答 3

3

纯 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;
}
于 2013-10-06T12:22:05.433 回答
0

IE 为您提供您想要的完美结果。您将其呈现为表格行。您无需为最后一行设置特定高度即可填充剩余空间。

将高度设置为 100% 实际上是错误的；这里 100% 表示 row3 的实际高度，chrome 会按照您所写的方式呈现它。

即row3c 溢出它的父row3。

因为您为剩余的行指定了像素高度，所以它不会填充。您需要为所有指定百分比高度（ row3a -> height: 20%, row3b -> height: 30%, row3c -> height: 50%）

它会起作用的

于 2013-10-06T12:01:01.797 回答
0

您将表格高度设为 300px，这是小提琴http://jsfiddle.net/yKPq3/11/ and assuming you want table to be filled 300px, you need to change .row3 to height:150px and .row3c to height:60px

于 2013-10-06T12:25:48.783 回答