CSS：div填充根据背景中的响应图像

Question

我有一个父级div，其背景图像是山脉。 我有一个孩子div，有一个房子的响应图像。 当窗户的垂直宽度发生变化时，我想给儿童div一个填充顶部，以便房屋保持在山脚下的位置。 我使用较少的CSS。

Answer 1

如果你将position: absolute; bottom: 0应用于房屋，山峰会position: relative会不会更好？

Answer 2

我将继续以“我绝对不是最好的CSS”开头，但我相当肯定使用Viewport Height

可以达到你想要的效果

下面是一个快速摘录。您可能希望从A.m.__get__更改为vh或vmin，具体取决于。

vmax

body,
html {
  height: 100%;
}
.parent {
  background-image: url(http://placehold.it/400x600);
  height: 100%;
  background-repeat: no-repeat;
}
.child {
  padding-top: 10vh;
}

Answer 3

如果纵向宽度表示高度，则必须使用js jQuery exaple

if ($(window).height()) < 800 {
    $(childdiv).css('pading-top','60px');
}