html - 100% 高度图像响应

Question

我正在尝试为桌面制作一张全高图片，当窗口调整图片大小并包含比例时。

我遇到的问题是，如果我将桌面版本的容器高度设置为 100%，则照片正下方的 div 不会保持与照片的关系，因为较小视口(viewport)上的高度设置。

有没有我遗漏的简单修复方法可以让照片缩小并且底部 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%;
}