吐司不在底部 - JavaScript

在开发网页或移动应用程序时，经常会遇到吐司（Toast）的应用。吐司是一种短暂显示的消息提示，它通常出现在屏幕的底部。

然而，有时候在使用吐司时，发现它并不会出现在屏幕底部，而是在中间或顶部。这通常是由于吐司的CSS样式有误或者JS代码存在问题。

以下是解决吐司不在底部的JavaScript代码片段：

var toast = document.getElementById('toast');
var screenHeight = window.innerHeight;
var distance = toast.offsetHeight + 20; // 设置距离底部的间距为20像素
toast.style.bottom = -distance + 'px';
toast.style.display = 'block';
setTimeout(function() {
  toast.style.bottom = '0';
}, 0);
setTimeout(function() {
  toast.style.bottom = -distance + 'px';
}, 1500);
setTimeout(function() {
  toast.style.display = 'none';
}, 2000);

解释：

1. 首先获取吐司的DOM元素，并记录屏幕的高度；
2. 计算出吐司距离屏幕底部的距离，即吐司高度加上一个额外的间距（这里设置的是20像素）；
3. 将吐司的底部位置设置为负的距离（即隐藏吐司），同时将显示属性设置为block，使吐司出现在页面上；
4. 在setTimeout函数中，将吐司的底部位置设置为0，即将吐司显示在屏幕底部；
5. 在1500毫秒后，将吐司的底部位置再次设置为负的距离，即隐藏吐司；
6. 在2000毫秒后，将吐司的display属性设置为none，从页面中移除吐司。

通过这段代码，我们可以将吐司显示在屏幕底部，并且具有隐藏和移除的功能。

希望这个代码片段可以帮助到你解决吐司不在底部的问题。