div组的动态div高度

Question

我有一个父母div和两个孩子.我希望孩子的身高保持在父母身高的75%和25%不变.

我遇到的问题是我需要父级通过背景图像设置高度.也就是说,它应该相应地缩小,但总是呈现图像的相同区域.

这是一个行为图:

儿童A包含文字.说实话,只要文本显示,我就不在乎孩子A的高度.我需要孩子B来保持它的高度作为父母的比例及其在父母div底部的位置.

我想知道是否有一个合理的纯css解决方案来解决这个问题.

Answer 1

这个问题在这里解决

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */

    position:relative;
}

将这些样式添加到子“div”中

一个div=>

width:100%;height:75%;background-color: lightblue;position:absolute; top:0; bottom:0; left:0

B 分区=>

width:100%;height:25%;background-color: green;position:absolute; top:75%; bottom:0; left:0; right:0;