javascript - HTML5 小底部页面被剪掉

Question

我正在创建一个 HTML5/Javascript 游戏，其中的布局需要始终绝对定位。这意味着，当我要调整窗口大小时，内容应该缩放，但不会溢出，所以没有滚动条，这样我就可以滚动浏览内容。

因此我使用了一个 flexbox，其中外部 div 容器被拉伸(stretch)到窗口宽度和高度大小 (100%)。它几乎可以工作，但底部仍有非常小的溢出。

这是 JSfiddle 上的演示 DEMO和 DEMO Fullscreen .奇怪的是，只有在全屏显示结果时才会出现这种剪裁。然后，也会出现一个垂直滚动条。它也出现在 Firefox、Chrome 和 Safari 等常用浏览器上。

它只发生在垂直方向，水平方向没问题。

我的问题是，我怎样才能避免这种情况？

CSS:

html, body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#game {
    position: absolute;

    background-color: #940020;
    border-color: #5c51d4;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}


#opRow, #gameRow, #playerRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: forestgreen;
    border-style: solid;
    border-radius: 20px;
}  

#myCanvas {
    width: 100%;
    height: 100%;
}

#opRow {
    height: 15%;
}
#gameRow {
    height: 40%;
}
#playerRow {
    height: 45%;
}

#playerCard1, #playerCard2, #playerCard3, #playerCard4, #playerCard5 {
    max-width: 90%;
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}

#opCard1, #opCard2, #opCard3, #opCard4, #opCard5 {
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
    margin: 2vh;
}

#playerCard, #opCard {
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}

#adout, #cards {
    height: 90%;
    margin: 1vh;

    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}

#cards {
    height: 90%;
    margin: 1vh;
}

#gameRow25, #gameRow75 {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


#gameRow75 {
    width: 75%;
}

#gameRow25 {
    width: 25%;
}

Answer 1

您的问题不在于您的代码，而在于 JSFiddle。顶部的导航栏由 JSFiddle 提供，打破了这种风格。我建议您使用文本编辑器而不是 JSFiddle，因为它只是真正用于共享代码片段，而不是完整的编辑。如果您将代码复制并粘贴到文件中，则样式可以正常工作(尽管您必须在 HTML 文件中插入 <link rel="stylesheet" type="text/css" href="css_file.css"> 以使其使用 CSS)。