如何将内容DIV的高度限制在其容器高度(以百分比表示)？
我有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 is，而item-image-wrapper为1024 is，图像为1024 is(其自然高度)。
我知道这个100%的DIV高度一次又一次地出现，我一直在寻找答案，但是我找不到适合这个情况的答案。
编辑：
我找到了这个SitePoint参考，在这个段落中，它说“百分比值是指.的高度”：有人知道这个规则吗？
回答 3
Stack Overflow用户
发布于 2012-06-03 00:45:42
在某些情况下，要做到这一点，您可以做的一件事是将width: 100%和height: 100%添加到每个插入元素中，如果图像占用了所有可用空间，则依赖于从其包含的块中扩展的文本。这并不是在每种情况下都有效，因为这样很难在页面上获得任何其他东西来为扩展文本腾出空间，但是在一个普通的HTML页面上，它不包含任何其他工作内容，在其他一些情况下，可以通过在文本内容的末尾放置一个浮动元素，并在文本内容后面的任何需要清除元素的位置上放置一个清除元素，就像在这个jsFiddle：http://jsfiddle.net/t6LvY/2/中一样。
然而，由于设计积累了复杂性，这可能很快就会变得令人讨厌。您最好只使用一点JavaScript将图像的最大高度设置为窗口大小上的窗口高度。
Stack Overflow用户
发布于 2012-06-02 17:52:28
我认为你应该删除最大高度从图像类最大宽度:100%是足够适合该图像的父容器的图像。我不知道这对你有没有帮助。
Stack Overflow用户
发布于 2012-06-02 20:51:14
我自己提出的(悲伤的)答案:如果我想保持在DIVs的百分比高度，并坚持纯CSS (即没有JS)，那么目标就无法实现。
W3C规范说，在这种情况下，百分比基本上被忽略了(查找文本“该百分比是用.计算的”)。此外，Internet Explorer文档 (我正在使用的浏览器)基本上是相同的(查找文本"*如果包含块的高度.*“)。
https://stackoverflow.com/questions/10864588
复制相似问题
腾讯云开发者
