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-width中删除max-height：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来在窗口调整大小时将图像的最大高度设置为窗口高度。

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

3 个答案: