I am new in reactjs. I tried many solutions, but can't fix my footer to show at the bottom of the web page after displaying the web content. In this scenario, if web page has less content, footer is sitting right after end of the web content, instead of sitting at bottom. Moreover, I also tried with position:fixed, which practically shows the footer always stick at the bottom of the page, and sometime, some of the contents got hide back of the footer if web page is long. Can you guys please help me to get rid of this issue.
function App() {
return (
<div className="App">
<Header></Header>
<Routes>
<Route path="/" element={<Home></Home>}></Route>
<Route path="/home" element={<Home></Home>}></Route>
<Route path="/blogs" element={<Blogs></Blogs>}></Route>
<Route path="/login" element={<Login></Login>}></Route>
<Route path="/register" element={<Register></Register>}></Route>
<Route path="*" element={<NotFound></NotFound>}></Route>
<Footer></Footer>
</div>
);
}.footer {
background-color: #758283;
color: white;
position: relative;
display: flex;
justify-content: space-between;
padding: 20px 40px;
bottom: 0;
}It is discouraged to use uppercase letters in class names. I am going to use app instead of App.
main class to the main contentapp a flex container:.app {
display: flex;
flex-flow: column nowrap;
height: 100vh; // or the minimum height of your content
}
.main {
flex-grow: 1;
}
That will make the center content grow to fill the rest of the screen, pushing the footer to the bottom.