网页下的空白区域

Question

我这里有一段样式化组件 CSS。我应该如何修复它以删除呈现的网页下方的空白区域？

const Tetris = () => {

    return (
        <StyledTetrisWrapper>
            <StyledTetris>
                <Stage stage={createStage()} />
                <aside>
                    <div>
                        <Display text="Score" />
                        <Display text="Rows" />
                        <Display text="Level" />
                    </div>
                    <StartButton />
                </aside>
            </StyledTetris>
        </StyledTetrisWrapper>
    )
}


const StyledTetrisWrapper = styled.div`
    background: url(${bgImage2}) #000;
    width: 100 vh;
    height: auto;
    overflow: hidden;
    background: cover;
`

此处的错误图像： enter image description here

Answer 1

const StyledTetrisWrapper = styled.div`
    background: url(${bgImage2}) #000;
    width: 100vw;
    height:100vh;
    overflow: hidden;
    background-size: cover;
    `

我添加了背景大小的封面和高度 100vh；