语义反应/背景图像和高度 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

对于高度为 100 像素的页脚：

height: 100px;

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

height: calc(100vh - 100px)

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

语义反应/背景图像和高度 100 vh

Semantic React / Background Image and height 100 vh

css

reactjs

semantic-ui