css - 语义 react /背景图像和高度 100 vh

Question

你好，我怎样才能让组件页脚只占据页面高度的 100 像素，而页面的其余部分成为组件网格

使用高度:vh我用我的内容试试这个:

export const GridWrap = styled(Grid)`
&&& {
    background-image: url(${background});
    height: 90vh;
    background-size: cover;
    background-position: fixed;
}
`

还有我的页脚:

export const FooterWrap = styled.div`
&&& {
    background: #000;
    Height:10vh
}

但没有成功

代码: https://codesandbox.io/s/black-platform-hybgc

Answer 1

对于高度为 100px 的页脚:

height: 100px;

对于内容，页面的其余部分:

height: calc(100vh - 100px)

只需替换代码中的当前样式