100％高度图像响应

Question

我正在尝试为桌面设置一个完整的高度图片，当窗口调整大小时，图片会调整大小并包含比例。

我遇到的问题是，如果我将桌面版的容器高度设置为100％，则由于较小视口的高度设置，照片下方的div不会保持与照片的关系。

我是否缺少一个简单的修复方法，可以让照片缩小，而底部的div保持在它的正下方？

这是我运行的当前代码，根本没有输出任何高度（我已经完成了其他方法，但这是我最新的）

#main-photo {
position: relative;
margin-top: 130px;
max-height: 100%;
max-width: 100%;
}

.featured-photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

Answer 1

尝试添加：

html,body {
   height: 100%;
}