Question

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

因此，我使用的是flexbox，其中外部div容器被拉伸到窗口宽度和高度尺寸（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）。

HTML5微小底页被剪掉了

1 个答案: