如何将内容DIV的高度限制在其容器高度(以百分比表示)？
如何将内容DIV的高度限制在其容器高度(以百分比表示)？
提问于 2012-06-02 17:47:38
我有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参考，在这个段落中，它说“百分比值是指.的高度”：有人知道这个规则吗？
Stack Overflow用户
发布于 2012-06-02 17:52:28
我认为你应该删除最大高度从图像类最大宽度:100%是足够适合该图像的父容器的图像。我不知道这对你有没有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10864588
复制相关文章
相似问题
腾讯云开发者
