当父级div只有最大高度时，height: 100%无法正常工作

Question

我理解不了！我试图使用max-height让父级div的高度不超过窗口的80％，并使子div占据所有父级高度减去一些东西。

但是，子元素的百分比高度属性根本不起作用，除非我给父级元素设置height属性。

为什么会这样呢？

这是我的简化版演示： https://jsfiddle.net/mbatcer/m2ohnsf5/ 为什么内部div不尊重父级高度并溢出容器？

HTML：

<div class="container">
  <div class="inner">
    <img src="http://via.placeholder.com/70x300">
  </div>
</div>

CSS：

.container {  
  background: blue; 
  padding: 10px; 
  max-height: 100px; 
}

.inner { 
  height: 100%;
  width: 70px;
  overflow: hidden;
}

- Mikhail Batcer

---

使用百分比设置高度的元素，还需要其父元素具有高度，一直到html/body，或者直到一个元素具有不使用百分比的高度，而max-height与此无关。此外，如果您在父元素上也使用百分比设置高度，则还需要为html/body设置高度，否则它将无法正常工作。为什么会这样呢？... html、body和元素上的高度默认为auto，在元素上使用百分比时，它会查询其父元素的高度，该高度将返回auto，因此最终高度将为0。 - Asons

Answer 1

我想这就是你要找的内容：

我认为这正是你在寻找的：

.container {  
  background: blue; 
  padding: 10px; 
  max-height: 100px; 
  display: flex;

}

.inner { 
  width: 70px;
  overflow: hidden;
}

这里是代码片段：https://jsfiddle.net/f9sfczya/1/

我在您的父级 div 中添加了 display: flex; 并从子级 div 中删除了 height: 100%;。

不幸的是，IE9 及更早版本不支持 display: flex;。

希望这可以帮到您。

- Achyutam

---

这并不会调整图片的大小。它只是剪裁（overflow: hidden）超出 flex 父元素最大高度的部分图像。https://jsfiddle.net/ncu4q3xa/ - pnichols

Answer 2

如果您使用百分比设置子元素的max-height，它将根据父元素的实际height而不是max-height来设置子元素的height。因此，您需要为.container设置一个高度，并为图像设置max-height: 100％，因为您的图像高度大于宽度。

.container {  
  background: blue; 
  padding: 10px; 
  height: 100px; 
}

.inner { 
  height: 100%;
  overflow: hidden;
}

img {
  max-height: 100%;
}

---

解决这个问题更好的方法是使用flex-box。

.container {
  display: flex;
  flex-flow: row;  
  background: blue; 
  padding: 10px; 
  max-height: 80vh; 
}

.inner { 
  overflow: hidden;
}

img {
  max-height: 100%;
}

- brian17han

Answer 3

在`.container`中添加`height:80vh;`，它就能正常工作。

- Our_Benefactors

---

我问题中的第二句话是：“我试图使父级div的高度不超过窗口高度的80%”。 - Mikhail Batcer

Answer 4

你应该像这样改变你的CSS -

.container {  
  background: blue; 
  padding: 10px; 
}

.inner { 
  max-height: 100px;
  width: 100% ;
  overflow: hidden;
}
.inner img { 
  max-height: 100px;
}

- Kam.p