时间戳

首页 > 解决方案 > 让 React 中的页面占据全屏

javascript - 让 React 中的页面占据全屏

问题描述

我正在一个使用 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;

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

无论哪个元素是您的背景，都以 css 为目标：

height: 100vh;

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

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

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

推荐阅读