如何在 ReactJS 中创建粘性页脚？

在本文中，我们将了解如何在 ReactJS 中创建粘性页脚。页脚是网站设计的重要元素。粘性页脚贴在网站底部，并向用户发出他们已到达网页末尾的信号。为了使用 react，我们必须首先设置项目。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app react-footer

• 第2步：创建项目文件夹即react-footer后， 使用以下命令移动到它：

  cd react-footer

项目结构：它将如下所示。

示例：在此示例中，我们将设计一个页脚，为此我们需要操作 App.js 文件和 App.css 以及 Footer.js 文件。

Footer.js

import React from 'react';
  
const Footer = () => (
  

    
This is react sticky footer!!
  
  
);
  
export default Footer;

应用程序.css

body {
 margin: 0;
 padding: 0;
 height:1000px;
}
.App{
 color: #228b22;
 text-align: center;
}
.footer {
 background-color: green;
 border-top:2px solid red;
 position: fixed;
 width: 100%;
 bottom: 0;
 color: white;
 font-size: 25px;
}

应用程序.js

import React from "react";
  
// Importing the footer component
import Footer from "./Footer";
  
// Importing the styling of App component
import "./App.css";
  
const App = () => (
  

    
GeeksforGeeks
    
Sticky Footer using Reactjs!
    

  
);
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

在评论中写代码？请使用 ide.geeksforgeeks.org，生成链接并在此处分享链接。