Twitter bootstrap 删除iPhone上Bootstrap 4中粘性页脚下的空白

在小型移动设备中，我的粘性页脚下方会出现空白。例如，当以“iPhone SE”屏幕大小查看时

我在引导示例中使用了相同的页脚和css，但无法消除空白

我认为这是因为我的文本很长，然后我使用媒体查询添加了页脚高度，但看起来不太好。我不知道如何修理它。任何指导都将不胜感激

/*粘性页脚样式
-------------------------------------------------- */
html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：60px；
文本
}
.页脚{
位置：绝对位置；
底部：0；
宽度：100%；
/*在此处设置页脚的固定高度*/
高度：60px；
行高：60px；/*文本垂直居中*/
背景色：#0000ff
}
/*自定义页面CSS
-------------------------------------------------- */
/*模板或粘性页脚方法不需要*/
.集装箱{
宽度：自动；
最大宽度：680px；
填充：0 15px；
}
.文本静音{
颜色：#fff！重要；
}

用于引导的粘性页脚模板
这是一个检查此粘性页脚的测试。此页脚在小屏幕中打断。

发生此问题是因为在小屏幕上，页脚分成两行，并且由于您设置了

行高：60px

，因此总共产生了

120px

，这克服了

60px

高度设置

您可以使用或通过设置

overflow:hidden来处理它

（不是最好的解决方案），或者用一些

填充替换
行高

下面是一个媒体查询的示例。（对于您的文本，问题出现在514px左右）


/*粘性页脚样式
-------------------------------------------------- */
html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：60px；
文本
}
.页脚{
位置：绝对位置；
底部：0；
宽度：100%；
背景色：#0000ff
}
@全部和全部介质（最小宽度：514px）{
.页脚{
/*在此处设置页脚的固定高度*/
高度：60px；
行高：60px；/*文本垂直居中*/
}
}
@全部和全部介质（最大宽度：514px）{
.页脚{
填充：10px0；
}
}
/*自定义页面CSS
-------------------------------------------------- */
/*模板或粘性页脚方法不需要*/
.集装箱{
宽度：自动；
最大宽度：680px；
填充：0 15px；
}
.文本静音{
颜色：#fff！重要；
}

用于引导的粘性页脚模板
这是一个检查此粘性页脚的测试。此页脚在小屏幕中打断。
这几乎解决了问题。非常感谢你的帮助。干杯