html - 无法获取 2 张图像以展开以填充父 div

Question

我想做的是创建一个页面，其中包含一个包含 2 列的表格。左边的列显示了一些数据(这部分工作正常)，右边的列将有并排显示 2 个图像的 div(这也有效)。问题是右侧 div 中的图像不会展开以填满左侧表格列的整个高度。如果我查看调试器中的内容，我可以看到我的左表列的高度(例如)为 440 像素。但是，右侧的 div 高度始终为 300px。由于我的 img 是 45x300px，我猜 div 以某种方式继承自它。我使用 CSS 已经有一段时间了，但我不认为自己是专家，所以我真的认为我遗漏了一些关于高度是如何继承的。其 html 如下所示:

<div>
    <table>
        <tr>
            <td class="left-outer">
                <!-- left side content goes here -->
                <p>Test 1....</p>
                ...
            </td>
            <td class="right-outer">
                <div class="right-outer-2images">
                    <div class="right-outer-2images-img1">
                        <img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/fish.png" alt="Report Image Bar" />
                    </div>
                    <div class="right-outer-2images-img2">
                        <img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/czoch.png" alt="Report Image Bar" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

CSS:

.left-outer {
    border-style: solid;
    border-color: green;
    width: 20%;
}
.right-outer {
    border-style: solid;
    border-color: red;
    width: 80%;
    /*display: inline-flex;
     justify-content: flex-start;*/
    height: 100%;
}
.right-outer-2images {
    float: left;
    height: 635px;  /* This works but is not ideal */
    /*height: 100%;*/ /* This does not work but I believe should */
    width: 98%;
    border-style: solid;
    border-color: blue;
    /*vertical-align: text-top;*/
}
.right-outer-2images-img1 {
    float: left;
    width: 30%;
    height:100%;
    /*border-style: solid;*/
    border-color: orange;
}
.right-outer-2images-img2 {
    float: left;
    width: 70%;
    height: 100%;
    /*border-style: solid;*/
    border-color: yellow;
}
.right-outer-2images-img1 img,
.right-outer-2images-img2 img {
    float: left;
    width: 100%;
    height: 100%;
}

所以左外(表格列)内容的高度将始终大于图像，我希望图像被拉伸(stretch)到相同的高度并显示在右外表格列中。对于上面的 CSS 示例，如果我将 right-outer-2images div 的高度显式设置为实际高度，那么一切似乎都有效，但如果我将高度设置为 100%(或继承)，它会起作用不行。我在 jsFiddle ( http://jsfiddle.net/a98w683u/ ) 中整理了一个示例，请看一下，让我知道我做错了什么。

Answer 1

您的代码不起作用，因为从未为您的表格单元格或表格定义高度。因此，您的 height:100% 声明不知道什么是 100%。如果您在 .right-outer 声明中设置高度，它将起作用:

DEMO EXAMPLE

需要更改这 3 个声明:

.right-outer {
    border-style: solid;
    border-color: red;
    width: 80%;
    height: 100px; /* this is more of a starting height as the left column will stretch it  */
}
.right-outer-2images {
    float: left;
    height: 100%; /* don't forget to change this back to 100% */
    width: 98%;
    border-style: solid;
    border-color: blue;
}
.right-outer-2images-img1 {
    height:100%; /* Updated; add this back in */
    float: left;
    width: 30%;
    border-color: orange;
}