身高：当父母div只有最大高度时，100％无法工作

无法将我的头围绕它！我试图让父div使用不超过80％的窗口高度max-height，而div div将所有父母高度减去一些东西。身高：当父母div只有最大高度时，100％无法工作

但是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; 
}

来源

2017-08-07 Mikhail Batcer

一个使用百分比设置高度的元素，也需要它的父元素有一个高度等等，一直到html/body，或者直到元素的高度不是使用百分比，而是max-身高“与此无关。另外，如果你在父级上使用百分比来设置高度，那么你还需要将高度设置为html/body，否则它将不起作用。为什么它是这样的？ ... html，body和元素的高度默认为auto，当在元素上使用百分比时，它会查询父元素的高度，这将返回auto，因此它将以0结尾。 – LGSon

-1

添加height:80vh;到.container，它会工作。

来源

2017-08-07 17:10:39

我的第二句话问题是：“我试图让父母的窗户高度不超过80％”。 –

请参阅编辑。将其更改为“80vh” –

-1

您应该将容器最大高度变成高度

.container {

背景：蓝色; padding：10px; height：100px; }

然后添加

.inner img{

高度：100％ } `

来源

2017-08-07 17:22:33

如果设置孩子的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%; 
}

来源

2017-08-07 17:24:30 brian17han

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

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

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

来源

2017-08-07 17:29:39

我认为这是你在找什么：

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

} 

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

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

这里我添加了显示：flex;在你的父母的div和删除的高度：100％; from child div。

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

希望这可以帮助你。

来源

2017-08-07 17:42:41 Achyutam

身高：当父母div只有最大高度时，100％无法工作

回答

相关问题