JQuery UI对话框 - 对话框下方的多余空间

Question

我正在研究一个简单的井字游戏应用程序并在CodePen中构建它。当用户丢失或强制绘制（设计为无法打）时，弹出一个jQuery UI对话框，通知用户所述结果。我遇到的问题是，当发生这种情况时，会出现一个大的空白空间，导致滚动条出现在页面的右侧。这是一个小细节 - 但我想解决。我不能将overflow: hidden放在身上，因为那时用户将无法在小屏幕或调整大小的浏览器窗口中滚动。我已经尝试了以下无济于事：

• 调整对话框最顶端的屏幕
• 将overflow: hidden统治地位只是.ui-dialog
• 调整对话框
• 调整的高度的.ui-dialog
• 与其他对话框选项搞乱margin-bottom，看看他们是事业

其中的一些看起来很牵强，但我想在来这里之前尝试我能想到的一切。研究也无济于事。我正在运行Chrome，并且有问题的笔可以在这里找到：http://codepen.io/no_stack_dub_sack/pen/YGNRxO。

任何帮助，将不胜感激！提前致谢。

同样，这是一个小细节，但由于该应用适合所有的大多数屏幕没有滚动的页面，我想保持它看起来尽可能干净。

下面的代码：

// 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(); 
      } 
     } 
     }); 

Answer 1

某处在对话框创建过程中，位置设置为相对你的对话框，这会导致你的游戏来计算的对话框，这给空缺口的高度上。你可以简单地设置UI的对话框位置在CSS绝对的，它会解决这个问题：

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

http://codepen.io/anon/pen/EgmoGZ