Question

无法绕过它！我尝试使父级div使用max-height的窗口高度不超过80％，并使用子级div来取所有父级高度减去某些东西。

但父级百分比中的height属性根本不适用于该子级，除非我提供父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;
}

Answer 1

将height:80vh;添加到.container，这样就可以了。

Answer 2

如果您使用百分比设置孩子的max-height，则会根据父母的真实height而不是height来设置孩子的max-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%;
}

Answer 3

你应该改变你的CSS -

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

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

Answer 4

我认为这就是你要找的东西：

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

}

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

这是小提琴：https://jsfiddle.net/f9sfczya/1/

这里我添加了display：flex;在你的父div和删除高度：100％; 来自儿童div。

不幸的是显示：flex; IE9及更早版本不支持。

希望这可以帮助你。

高度：当父div只有max-height时，100％不工作

4 个答案: