如何使用百分比将内容 DIV 高度限制为其容器高度？

Question

我有以下 HTML 结构部分（为简单起见省略了结束标签，缩进表示嵌套标签）：

...
- <div class="main-content-wrapper">
  - <div class="item-image-wrapper">
    - <img class="item-image fit">
  - <div class="item-text">
    - <h2 id="itemTitle">
    - <p id="itemContent">

使用以下 CSS

.itemdetailpage section[role=main] article .main-content-wrapper {
    display: -ms-grid;
    -ms-grid-rows: auto auto;
    width: 100%;
    height: 100%;
}

.itemdetailpage section[role=main] article .item-image-wrapper {
    -ms-grid-row: 1;
    width: 100%;
    height: 100%;
}

.itemdetailpage section[role=main] article .item-image {
    margin-top: 0px;
    margin-left: 0px;
}

.itemdetailpage section[role=main] article .item-image.fit {
    /* Fit image to page size */
    max-width: 100%; 
    max-height: 100%;
}

.itemdetailpage section[role=main] article .item-text {
    -ms-grid-row: 2;
    margin-right: 5px;
}

我们的目标是让 IMG 不高于（也不宽于）主要内容允许的范围，即，如果大于此，则适合主要内容空间，或者如果较小，则保持其原始大小。文本可以在图像下方流动，因此也可以在折叠下方，这没问题。这应该在没有 JS 代码，只有 CSS 的情况下发生。

当项目文本比图像窄时，一切正常。图像包装器比图像高一些像素，不知道为什么，但看起来还可以。

我在这里看到的问题是，同时：图像高于可用高度，并且项目文本比图像宽（特别是项目标题）。在这种情况下，图像包装器变得比其容器高，因此跟随图像。例如。 .main-content-wrapper 接收到 900px 的（正确）高度，但 item-image-wrapper 是 1024px 高，图像是 1024px 高（它的自然高度）。

我知道这个 100% DIV 高度一次又一次地出现，我一直在寻找答案，但我找不到适合这种情况的答案。

编辑：

我找到了这个SitePoint reference，上面写着“百分比值是指...的高度”的段落：有人知道这个规则吗？

Answer 1

我认为您应该从图像类中删除 max-height max-width:100% 足以使该图像适合图像的父容器。我不知道这对你有没有帮助。

Answer 2

我自己提出的（悲伤的）答案：如果我想在 DIV 上保持百分比高度，并坚持纯 CSS（即没有 JS），那么目标就无法实现。

W3C specs 表示这种情况下的百分比基本上被忽略（查找文本“百分比是用...计算的”）。而且Internet Explorer docs（我正在使用的浏览器）说的基本相同（查找文本“*如果包含块的高度......*”）。

Answer 3

在某些情况下，您可以做的一件事是向每个中间元素添加width: 100% 和height: 100%，如果图像占用了所有可用空间，则依赖于从其包含块中延伸出来的文本。这并不适用于所有情况，因为很难在页面上获得任何其他内容来为扩展文本腾出空间，但是在一个不包含任何其他内容的 vanilla HTML 页面上它可以工作，并且有可能让它工作在在其他一些情况下，通过在文本内容的末尾放置一个浮动元素并在该文本内容之后需要出现的任何位置放置一个清除元素，如在这个 jsFiddle 中：http://jsfiddle.net/t6LvY/2/

但是，随着设计复杂性的累积，这可能会很快变得令人讨厌。您最好使用一点 JavaScript 将图像的最大高度设置为调整窗口大小时的窗口高度。