父高度自动与子宽度和可变高度的div

Question

我试图找出一种相对浏览器兼容的方式，允许父div的高度扩展，其子级为width: 100%，高度为一定百分比。我需要父母height: 100%，因为第一个孩子的身高依赖于它。我希望父div上的背景图像与屏幕溢出的整个页面底部对齐，但父div的高度仅限于屏幕的高度，因为它的高度设置为100％。

就我而言，我设置了以下属性：

html, body { width: 100%; height: 100%; }

.parent {
    width: 100%;
    height: 100%:
    position: relative;
}

.child1 {
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 960px;
    position: relative;
}

.child2 {
    width: 100%;
    height: 900px;
    position: relative;
}

我可以将第二个孩子的div放置在相对于第二个孩子的底部的绝对位置，但是我需要在第二个孩子上设置overflow: hidden其他元素，并且因为背景大小应该按照页面的宽度进行缩放，它会在大屏幕上剪裁。

示例：http://jsfiddle.net/qxbu0mom/

编辑：

感谢Terry指出我可以使用vh;我可以将第一个孩子的身高改为100vh并从父母身上删除height: 100%。