Javascript 如何将图像移动到底部？

我如何使我的图像在任何屏幕大小的底部，我也希望我的图像在人的脚下，这样你就必须向下滚动才能看到图像

现在是这样 我希望所有sreen尺寸的高度都是这样

到目前为止，我的代码与该项目无关。我不介意我是否也需要使用其他语言

.navigation，
.activeBtn{
文字装饰：无；
颜色：黑色；
字体系列：Arial、Helvetica、无衬线字体；
字号：2vh；
左边距：20px；
字体大小：粗体；
}
.activeBtn{
背景色：#E0；
填充：15px；
边界半径：25px；
}
.Lgo{
浮动：对；
清楚:对,；
高度：自动；
利润上限：-70px；
宽度：300px；
右侧填充：30px；
填充顶部：10px；
}
.分离线{
边界：无；
高度：1px；
边缘顶部：50px；
背景色：黑色；
}
导航{
边缘顶部：50px；
左边距：50像素；
宽度：800px；
}
身体{
背景颜色：浅蓝色；
/*用于演示目的*/
}
.页脚文本{
背景色：rgb（24,24,192）；
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
宽度：100%；
文本对齐：居中；
填充顶部：20px；
垫底：20px；
}

&抄袭；蒂姆·弗雷德里克森2020

如果您指示图片而不是测试图片（带有鸽子），您将获得所需的结果。首先，您必须将所有内容包装在

main

div中（没错）。接下来，为

信息

类设置

高度：calc（100vh-128px）

，其中

128px

是

标题的高度。对于图片集
页边距顶部：auto
。有必要吗


正文{
背景色：浅蓝色；/*用于演示*/
框大小：边框框；
保证金：0；
填充：0；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
}
标题{
}
.navigation、.activeBtn{
文字装饰：无；
颜色：黑色；
字体系列：Arial、Helvetica、无衬线字体；
字号：2vh；
左边距：20px；
字体大小：粗体；
}
.activeBtn{
背景色：#E0；
填充：15px；
边界半径：25px；
}
.Lgo{
浮动：对；
清楚:对,；
高度：自动；
利润上限：-70px；
宽度：300px；
右侧填充：30px；
填充顶部：10px；
}
.分离线{
边界：无；
高度：1px；
边缘顶部：50px；
背景色：黑色；
}
导航{
边缘顶部：50px；
左边距：50像素；
宽度：800px；
}
.信息{
显示器：flex；
弹性：10自动；
高度：计算（100vh-128px）；
}
.信息管理{
宽度：300px；
页边顶部：自动；
}
页脚{
flex:0自动；
}
.页脚文本{
背景色：rgb（24,24,192）；
颜色：白色；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
宽度：100%；
文本对齐：居中；
填充顶部：20px；
垫底：20px；
}



&抄袭；蒂姆·弗雷德里克森2020

尝试添加位置：固定；底部：10；与图像一致。