这个问题通常是由于包裹页脚图像的父级 div 的高度不正确而导致的。要解决这个问题,可以使用 CSS 中的 flexbox 布局来使父级 div 自适应高度。
示例代码:
HTML:
CSS:
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wrapper img {
flex: 1;
}
在这个示例中,父级 div(.wrapper)设置为 flexbox 布局,flex-direction 属性设置为列方向,因为我们希望页脚图像处于最底部。然后,将 min-height 属性设置为 100vh,以确保父级 div 至少与视窗一样高。最后,将页脚图像(img)的 flex 属性设置为 1,以使它填充剩余的空间。
这样就可以保证父级 div 的高度始终正确,不会留下空白。