身高:当父母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;
}
添加height:80vh;
到.container
,它会工作。
我的第二句话问题是:“我试图让父母的窗户高度不超过80%”。 –
请参阅编辑。将其更改为“80vh” –
您应该将容器最大高度变成高度
.container {
背景:蓝色; padding:10px; height:100px; }
然后添加
.inner img{
高度:100% } `
如果设置孩子的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%;
}
你应该改变你的CSS像这个 -
.container {
background: blue;
padding: 10px;
}
.inner {
max-height: 100px;
width: 100% ;
overflow: hidden;
}
.inner img {
max-height: 100px;
}
我认为这是你在找什么:
.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及更高版本的支持。
希望这可以帮助你。
一个使用百分比设置高度的元素,也需要它的父元素有一个高度等等,一直到html/body,或者直到元素的高度不是使用百分比,而是max-身高“与此无关。另外,如果你在父级上使用百分比来设置高度,那么你还需要将高度设置为html/body,否则它将不起作用。为什么它是这样的? ... html,body和元素的高度默认为auto,当在元素上使用百分比时,它会查询父元素的高度,这将返回auto,因此它将以0结尾。 – LGSon