javascript - 一组 div 的动态 div 高度

Question

我有一个父级 div 和两个子级。我希望 children 的高度保持在 parent 高度的 75% 和 25% 不变。

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

这是一个行为图:

child A 包含文本。老实说，只要显示文本，我就不在乎 child A 有多高。我需要 child B 来保持它的高度与父级的比例及其在父级 div 底部的位置。

我想知道这个问题是否有合理的纯CSS解决方案。

Answer 1

此问题已解决 here

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”

一个分区=>

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;