Sticky footer always at the bottom-CodePudding

I wanted to make a footer stay at the very bottom of the page. I have a webpage that contains a searchbar. When the user types in the searchbar, the app fetches some data and displays them in a table right below the searchbar, so the page might need to be scrolled to see the full table. I managed to make the footer be displayed right at the end of the table at the bottom of the webpage, after the scrolling; the problem is that when the page is loaded for the first time and the searchbar is empty (not used yet by the user), the footer gets displayed right below the form (since there is no table), like halfway in the webpage. I can't add paddings or margins to "force" it down because those paddings and margins would be applied aswell when the user makes use of the form and the table gets rendered, and the space between the end of the table and the footer would then be too much.

Here are some segments of my code:

App.css

html, body, .container
{
  height: 100%;
  margin: 0;
  padding: 0;
}

footer 
{
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
}

hr
{
  color: silver;
}

#recent_matches_table 
{
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  color: blue;
  border: 10000px rounded;
  border-color: aqua;
  font-family: 'Times New Roman', Times, serif;
}

CustomFooter.js

// (... Some React code ...)

<div className='container'>
                <footer>
                    <hr />
                    <p className='copyright'>Copyright: giafra , 2022.</p>
                    <p className='copyright'>Halo is a trademark of a series of video games and books. All rights are reserved to Microsoft and 343 Industries.<br />
                    The Halo: The Master Chief Collection logo is intellectual property of Microsoft and 343i, as well as the entire Halo related logos.</p>
                    <p className='copyright'>The API used to fetch the player data is property of HaloDOTApi, and it's intended not to have a commercial use.</p>
                </footer>   
            </div>
// (...)

This is what happens when the searchbar is not used, as you can see the footer gets rendered in the middle of the page:

https://ibb.co/6y9bvZb

This is what happens when the searchbar renders the table with the data, the footer gets correctly rendered just below the end of the table, after the scrolling.

https://ibb.co/cDtK5Mk

CodePudding user response：

Just add some css to main element, for example:

min-height: 100vh;

CodePudding user response：

Try this

footer {
  background: #140b5c;
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
}
footer .content {
  max-width: 1250px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .content .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

CodePudding user response：

If you set html and body height to 100%, and set any container's min-height to 100%,which is direct child,so you will get your desired output.

As % is always inherited from the parent.

Consider following example:

html file

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <div >
                <div>sum1</div>
                <div>sum2</div>
                <div>sum3</div>
                <div>sum4</div>
                <div>sum5</div>
            </div>
        </header>
        <div >
            <h2>This is the main content</h2>
            <p>lorem50</p>
        </div>
        <footer>
            <p>This is the footer which will always at bottom</p>
            <p>&copy; all rights reserved.</p>
        </footer>

    </body>

</html>

Css file

html,
body {
  height: 100%;
}
header .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  color: white;
}
div.main {
  min-height: 100%;
}
footer {
  background-color: #000;
  color: white;
}

Here, div.main container will inherit its height according to parent.

If you want it to be sticky, you can refer to following sites:

1st website

2nd website