Jquery ui JQuery UI对话框-对话框下方不需要的空间

我正在开发一个简单的tic-tac-toe应用程序，并用CodePen构建它。当用户丢失或强制绘制（设计为无与伦比）时，会弹出一个jquery UI对话框，通知用户所述结果。我遇到的问题是，当这种情况发生时，会出现一个很大的空白，导致页面右侧出现一个滚动条。这是一个小细节-但我想修复。我无法将

overflow:hidden

放在正文中，因为这样用户就无法在小屏幕上或在调整大小的浏览器窗口中滚动。我已经尝试了以下方法，但没有效果：

• 将对话框的位置调整到屏幕的最顶端
• 将

  溢出：隐藏

  规则置于

  .ui对话框

• 调整对话框的高度
• 调整

  .ui对话框的
  页边距底部

• 搞乱其他对话框选项，看看它们是否是原因

其中一些似乎有些牵强，但在来这里之前，我想尝试我能想到的一切。研究也没有结果。我正在运行Chrome，可以在此处找到有问题的笔：

在此方面的任何帮助都将不胜感激！提前谢谢

同样，这是一个小细节，但由于该应用程序可以在一个页面上完成所有操作，而不会在大多数屏幕上滚动，因此我希望它看起来尽可能干净

代码如下：

// DIALOG BOXES

      $('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>');
      $('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>');
      $('.gameOver').dialog({
        autoOpen: false,
        resizable: false,
        height: 120,
        dialogClass: 'no-close',
        buttons: {
          'Play Again?': function() {
            $('.gameOver').dialog('close');
            setNewGame();
          }
        }
      });

//对话框
$（'body'）。追加（'It's a Draw！
'）；
$（'body'）。追加（'p>你输了！
'）；
$（'.gameOver'）。对话框({
自动打开：错误，
可调整大小：false，
身高：120，
dialogClass:“禁止关闭”，
按钮：{
“再次播放？”：函数（）{
$（'.gameOver'）。对话框（'close'）；
setNewGame（）；
}
}
});

在对话框创建过程中的某个地方，该位置在对话框上设置为相对位置，这会导致游戏的高度计算对话框，从而给出空的间隙。您只需在css中将ui对话框位置设置为绝对，即可解决问题：

.ui-dialog {
  position: absolute;
  box-shadow: 1px 1px 30px 5px;
  background: #04A777;
  border-radius: 10px;
  outline: none;
  overflow: hidden;
  margin-top: none;
}

---

在对话框创建过程中的某个地方，该位置在对话框上设置为相对位置，这会导致游戏的高度计算对话框，从而给出空的间隙。您只需在css中将ui对话框位置设置为绝对，即可解决问题：

.ui-dialog {
  position: absolute;
  box-shadow: 1px 1px 30px 5px;
  background: #04A777;
  border-radius: 10px;
  outline: none;
  overflow: hidden;
  margin-top: none;
}

---

哇，太简单了-它成功了，非常感谢！这让我非常沮丧。这似乎是一件小事，但我认为这样做的效果要干净得多。希望其他人会遇到同样的问题，并发现这是有用的。再次感谢！哇，太简单了-它成功了，非常感谢！这让我非常沮丧。这似乎是一件小事，但我认为这样做的效果要干净得多。希望其他人会遇到同样的问题，并发现这是有用的。再次感谢！