最大高度的孩子：100% 溢出父母
[英]Child with max-height: 100% overflows parent
问题描述
I'm trying to understand what appears to be unexpected behaviour to me:
我试图了解对我来说似乎出乎意料的行为：
I have an element with a max-height of 100% inside a container that also uses a max-height but, unexpectedly, the child overflows the parent:我在一个也使用最大高度的容器中有一个最大高度为 100% 的元素，但出乎意料的是，子元素溢出了父元素：
Test case: http://jsfiddle.net/bq4Wu/16/测试用例：http: //jsfiddle.net/bq4Wu/16/
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
This is fixed, however, if the parent is given an explicit height:但是，如果给父级指定了明确的高度，则这是固定的：
Test case: http://jsfiddle.net/bq4Wu/17/测试用例：http: //jsfiddle.net/bq4Wu/17/
.container {
height: 200px;
}
Does anyone know why the child would not honour the max-height of its parent in the first example?有谁知道为什么孩子在第一个例子中不尊重其父母的最大高度？ Why is an explicit height required?为什么需要明确的高度？
13 个解决方案
解决方案1
316 已采纳 2013-01-10 17:11:21
When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height , oddly enough .当您为孩子的max-height指定百分比时，它是父母实际身高的百分比，而不是父母的max-height ，奇怪的是。 The same applies to max-width .这同样适用于max-width 。
So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-height to be calculated from, so max-height computes to none , allowing the child to be as tall as possible.因此，当您没有在父项上指定显式高度时，就没有要计算子max-height的基本高度，因此max-height计算为none ，从而允许子项尽可能高。 The only other constraint acting on the child now is the max-width of its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.现在作用于子级的唯一其他约束是其父max-width ，并且由于图像本身比宽度高，它会向下溢出容器的高度，以便在保持其纵横比的同时仍然与整体可能。
When you do specify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height.当您为父级指定显式高度时，子级知道它最多必须是该显式高度的 100%。 That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).这允许它被限制在父级的高度（同时仍保持其纵横比）。
解决方案2
96 2013-01-10 17:47:31
.container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; float: left; margin-right: 20px; } .img1 { display: block; max-height: 100%; max-width: 100%; } .img2 { display: block; max-height: inherit; max-width: inherit; }
<!-- example 1 --> <div class="container"> <img class='img1' src="http://via.placeholder.com/350x450" /> </div> <!-- example 2 --> <div class="container"> <img class='img2' src="http://via.placeholder.com/350x450" /> </div>
I played around a little.我玩了一下。 On a larger image in firefox, I got a good result with using the inherit property value.在 Firefox 中的较大图像上，使用继承属性值得到了很好的结果。 Will this help you?这会对你有帮助吗？
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
解决方案3
17 2019-10-09 19:44:02
Instead of going with max-height: 100%/100%, an alternative approach of filling up all the space would be using position: absolute with top/bottom/left/right set to 0.除了使用 max-height: 100%/100% 之外，填充所有空间的另一种方法是使用position: absolute并将 top/bottom/left/right 设置为 0。
In other words, the HTML would look like the following:换句话说，HTML 将如下所示：
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content">
1, 2, 3
</div>
</div>
</div>
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.scrollable-content {
/* Add styling here */
}
Try it below:在下面试试：
.flex-content { flex-grow: 1; position: relative; width: 100%; height: 100%; } .scrollable-content-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; } html { height: 50%; width: 50%; } body { height: 100%; width: 100%; } .parent { height: 100%; outline: 1px solid red; }
<html> <body> <div class="parent"> <div class="flex-content"> <div class="scrollable-content-wrapper"> <div class="scrollable-content" id="scrollable"> 1, 2, 3 </div> </div> </div> </div> <button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button> <p> The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased. </p> </body> </html>
解决方案4
8 2014-11-21 15:51:43
I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/我在这里找到了解决方案： http ://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element.这个技巧是可能的，因为它在元素的 WIDTH 和 PADDING-BOTTOM 之间存在关系。 So:所以：
parent:家长：
container {
height: 0;
padding-bottom: 66%; /* for a 4:3 container size */
}
child ( remove all css related to width , ie width:100%): child（删除所有与width相关的css ，即width:100%）：
img {
max-height: 100%;
max-width: 100%;
position: absolute;
display:block;
margin:0 auto; /* center */
left:0; /* center */
right:0; /* center */
}
解决方案5
5 2015-07-06 09:30:59
You can use the property object-fit您可以使用属性object-fit
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}
A full explanation of this property by Chris Mills in Dev.Opera Chris Mills 在 Dev.Opera中对此属性的完整解释
And an even better one in CSS-Tricks还有一个更好的 CSS-Tricks
It's supported in它支持在
- Chrome 31+铬 31+
- Safari 7.1+ Safari 7.1+
- Firefox 36+火狐 36+
- Opera 26+歌剧 26+
- Android 4.4.4+安卓 4.4.4+
- iOS 8+ iOS 8+
I just checked that vivaldi and chromium support it as well (no surprise here)我刚刚检查了维瓦尔第和铬也支持它（这里不足为奇）
It's currently not supported on IE, but... who cares ? IE 目前不支持它，但是…… 谁在乎呢？ Also, iOS supports object-fit, but not object-position, but it will soon.此外，iOS 支持 object-fit，但不支持 object-position，但很快就会支持。
解决方案6
3 2018-05-10 20:43:07
Here is a solution for a recently opened question marked as a duplicate of this question.这是最近打开的问题的解决方案，标记为该问题的副本。 The <img> tag was exceeding the max-height of the parent <div> . <img>标签超过了父<div>的最大高度。
In this case, adding display:flex to the 2 parent <div> tags was the answer在这种情况下，将display:flex添加到 2 个父<div>标签就是答案
解决方案7
2 2013-01-10 16:52:33
Maybe someone else can explain the reasons behind your problem but you can solve it by specifying the height of the container and then setting the height of the image to be 100%.也许其他人可以解释您问题背后的原因，但您可以通过指定容器的高度然后将图像的高度设置为 100% 来解决它。 It is important that the width of the image appears before the height .重要的是图像的width出现在height之前。
<html>
<head>
<style>
.container {
background: blue;
padding: 10px;
height: 100%;
max-height: 200px;
max-width: 300px;
}
.container img {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
</body>
</html>
解决方案8
2 2013-01-10 17:17:47
The closest I can get to this is this example:我能得到的最接近的是这个例子：
http://jsfiddle.net/YRFJQ/1/ http://jsfiddle.net/YRFJQ/1/
or或者
.container {
background: blue;
border: 10px solid blue;
max-height: 200px;
max-width: 200px;
overflow:hidden;
box-sizing:border-box;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
The main problem is that the height takes the percentage of the containers height, so it is looking for an explicitly set height in the parent container, not it's max-height.主要问题是高度占容器高度的百分比，因此它在父容器中寻找明确设置的高度，而不是最大高度。
The only way round this to some extent I can see is the fiddle above where you can hide the overflow, but then the padding still acts as visible space for the image to flow into, and so replacing with a solid border works instead (and then adding border-box to make it 200px if that's the width you need)在某种程度上我可以看到的唯一方法是上面的小提琴，您可以在其中隐藏溢出，但是填充仍然充当图像流入的可见空间，因此用实心边框代替（然后如果这是您需要的宽度，请添加边框框以使其为 200 像素）
Not sure if this would fit with what you need it for, but the best I can seem to get to.不确定这是否符合您的需要，但我似乎能做到的最好。
解决方案9
2 2018-02-13 10:24:47
A good solution is to not use height on the parent and use it just on the child with View Port :一个好的解决方案是不在父级上使用高度，而只在具有View Port的子级上使用它：
Fiddle Example: https://jsfiddle.net/voan3v13/1/小提琴示例： https ://jsfiddle.net/voan3v13/1/
body, html {
width: 100%;
height: 100%;
}
.parent {
width: 400px;
background: green;
}
.child {
max-height: 40vh;
background: blue;
overflow-y: scroll;
}
解决方案10
2 2021-04-02 14:30:40
Simply adding display: flex;只需添加display: flex; to the container will do the trick.到容器就可以了。 Look at this .看看这个。
解决方案11
1 2020-03-09 21:50:35
Containers will already generally wrap their content nicely.容器通常已经很好地包装了它们的内容。 It often doesn't work as well the other way around: children don't fill their ancestors nicely.反过来，它通常也不能很好地工作：孩子们不能很好地满足他们的祖先。 So, set your width/height values on the inner-most element rather than the outer-most element, and let the outer elements wrap their contents.因此，在最里面的元素而不是最外面的元素上设置宽度/高度值，并让外部元素包裹它们的内容。
.container {
background: blue;
padding: 10px;
}
img {
display: block;
max-height: 200px;
max-width: 200px;
}
解决方案12
1 2020-09-24 11:16:15
http://jsfiddle.net/mpalpha/71Lhcb5q/ http://jsfiddle.net/mpalpha/71Lhcb5q/
.container { display: flex; background: blue; padding: 10px; max-height: 200px; max-width: 200px; } img { object-fit: contain; max-height: 100%; max-width: 100%; }
<div class="container"> <img src="http://placekitten.com/400/500" /> </div>
解决方案13
0 2013-01-10 17:22:20
Your container does not have a height.您的容器没有高度。
Add height: 200px;添加高度：200px；
to the containers css and the kitty will stay inside.到容器 css 和小猫将留在里面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.