如何让图片Footer在页面内容不足时固定显示在页面底部？

我想用图片作为页面页脚，当前使用的HTML代码如下：

<div class="row">
    <div class="col-md-12">
        <img src="<?php echo base_url('/assets/artwork/image.png');?>" class="img-fluid">
    </div>
</div>

当页面内容长度超过显示窗口时，效果正常；但内容不足以填满窗口时，图片和页面底部之间会出现空隙。请问需要添加什么代码，能确保内容不足时，图片页脚固定在页面底部？

采用Flex布局实现粘性页脚，调整后的代码如下：

更新后的HTML #

<body>
  <div class="content">
    页面内容
  </div>
  <footer class="footer">
    <img src="<?php echo base_url('/assets/artwork/image.png');?>" class="img-fluid">
  </footer>
</body>

更新后的CSS #

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto; /* 让内容区域自动填充剩余空间 */
}
.footer {
  flex-shrink: 0; /* 防止页脚被压缩 */
}

内容的提问来源于stack exchange，提问作者hatchtag