4

我有以下 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，接收到 900 像素的（正确）高度，但高度为 1024 像素，item-image-wrapper图像高度为 1024 像素（其自然高度）。

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

编辑：

我找到了这个SitePoint 参考，它说“百分比值是指...的高度”的段落：有人知道这个规则吗？

4

3 回答 3

1

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

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

于 2012-06-03T00:45:42.887 回答
0

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

于 2012-06-02T17:52:28.557 回答
0

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

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

于 2012-06-02T20:51:14.830 回答