如何在 React 中删除页脚下方的空白答案

【问题标题】：How to remove the whitespace below my footer in React如何在 React 中删除页脚下方的空白
【发布时间】：2021-11-23 00:18:33
【问题描述】：

我目前正在使用 Reactjs 构建一个应用程序。页面代码如下

import React, { Component } from 'react';
import "./launchpage.css" ;
export default class LaunchPage extends Component {
    render() {
        return (
            <div classname="Launchpage-Body">
                <h3>Launch Page</h3>    
            </div>
        )
    }
}

上述代码组件的CSS如下

.Launchpage-Body{
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100%;
}

Screenshot of page on Chrome

类名为“Launchpage-Body”的 div 元素不会覆盖整个视口，除非我在页面中的内容填满整个视口，否则其他页面仍然存在同样的问题。下图通过 chrome 上的检查元素显示了我的问题。

On checking with Inspect Element

App.js 文件包含我的应用程序中页眉、页脚和其他页面的路由，但它没有自己的 CSS。

如何让主 div 元素覆盖整个页面？

【问题讨论】：

标签： html css reactjs

【解决方案1】：

将 min-height 属性设置为 100vh 到要覆盖整个页面的类

min-height: 100vh;

或使用绝对定位在页面底部设置页脚

position: absolute;
bottom: 0;

【讨论】：

我在几个地方调整了我的代码，并包含了你提到的 CSS，它确实有效。感谢您的帮助

【解决方案2】：

在你的情况下使用 vh 和 vw 属性

.set-height{
    min-height: 100vh;
    min-width: 100vw;
}

班级会做的伎俩

【讨论】：