让 React 中的页面占据全屏答案

【问题标题】：Make page in React take up the full screen让 React 中的页面占据全屏
【发布时间】：2021-05-12 16:31:59
【问题描述】：

我正在使用 React 和 Material UI 库开发一个网站，并且我已经完成了主页的基本布局。但是，现在有点尴尬，因为主页没有占据全屏，底部留有一些空白区域。有谁知道如何设计我的主页以使其占据全屏？非常感谢提前

这是我主页的代码，Home.js

import React, { useState } from 'react';
import '../styling/Home.css';
import { constants } from '../styling/Constants';

import Header from '../components/Header';
import Footer from '../components/Footer';
import Searchbar from '../components/Searchbar';
import { StyledButton } from '../components/Button';
import BigCard from '../components/BigCard';
import SmallCard from '../components/SmallCard';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';

function Home() {
    const style = {
        'text-align': 'center'
    }
    const smallDivStyle = {
        'display': 'flex',
        'margin': '12px'
    }

    return (
        <div style={style}>
            <Searchbar />

            {/* item xs, md changes width length of paper */}
            <Container>
                <Grid container>
                    <Grid item xs={12}>
                        <BigCard></BigCard>
                    </Grid>
                </Grid>
            </Container>
            <br></br>
            <Container>
                <Grid container>
                    <Grid item md={4}>
                        <SmallCard></SmallCard>
                    </Grid>
                    <Grid item md={4}>
                    <SmallCard></SmallCard>
                    </Grid>
                    <Grid item md={4}>
                    <SmallCard></SmallCard>
                    </Grid>
                </Grid>
            </Container>
        </div>
    )
}


export default Home;

【问题讨论】：

...堆栈 sn-p 不显示任何内容...
还有 maxWidth={false}

标签： javascript html css reactjs material-ui

【解决方案1】：

无论哪个元素是你的背景，使用 css 定位：

height: 100vh;

这使得元素与屏幕高度相同。如果您在顶部有一个导航栏，那么您可以这样做：

height: calc(100vh - <height of navbar>px);

您还可以使用min-height 和max-height CSS 选择器来确保它不会缩小到某个高度以下（例如，用于移动显示）

【讨论】：

【解决方案2】：

您的容器需要 maxWidth={false} 。最顶层的容器。

【讨论】：