How to Keep Footer at Bottom of Screen

How to keep footer at bottom of screen

What you’re looking for is the CSS Sticky Footer.

* {  margin: 0;  padding: 0;}
html,body {  height: 100%;}
#wrap {  min-height: 100%;}
#main {  overflow: auto;  padding-bottom: 180px;  /* must be same height as the footer */}
#footer {  position: relative;  margin-top: -180px;  /* negative value of footer height */  height: 180px;  clear: both;  background-color: red;}

/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {  content: "";  height: 100%;  float: left;  width: 0;  margin-top: -32767px;  /* thank you Erik J - negate effect of float*/}

<div id="wrap">  <div id="main"></div></div>
<div id="footer"></div>

How to always keep footer at bottom of page, dispite screen size

Use position:absolute; on the footer. By default footer is positioned relative to the html element, but if you apply position:relative; to body then the body will become reference.

To position it in the very bottom even when there is not much content, Use height:100%; on body as well as html.

By position:absolute; you will position it at the bottom of the content of html. So it will not be visible when content is very long, you'd have to scroll down to see it. But if you want it to the bottom of the screen even when the content is long then use position:fixed;

Below is a working snippet.

html,body{  width:100%;  height:100%;  margin:0;  padding:0;}body{  position:relative;}footer{  position:absolute;  height:50px;  background-color:red;  bottom:0;  left:0;  width:100%;}

<footer>footer Here</footer>

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Show footer at the bottom of the page even if there is not enough content

This should make the footer appear always at the bottom of the page. We make the footer wrapper have position: absolute and use bottom: 0 to push it to the bottom. left: 0 removes the horizontal scrollbar.

html {
    position: relative;
    min-height: 100%;
}
.footerWrap {
    position: absolute;
    background-color: green;
    width: 100%;
    bottom: 0;
    left: 0;
}

<html>
<div class="footerWrap">Footer Here</div>
</html>

How to make footer stay at bottom of web page

You can use sticky footer located here https://getbootstrap.com/examples/sticky-footer/ or at https://codepen.io/elmahdim/pen/Djlax. In addition you can also use navbar-fixed-bottom

USING STICKY FOOTER GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/

index.html

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://getbootstrap.com/favicon.ico">
    <title>Sticky Footer</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="sticky-footer.css" rel="stylesheet">
</head>

<body>
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
            <h1>Sticky footer</h1>
        </div>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
    </div>
    <footer class="footer">
        <div class="container">
            <p class="text-muted">Place sticky footer content here.</p>
        </div>
    </footer>
</body>

</html>

sticky-footer.css

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}

USING NAVBAR_FIXED_BOTTOM

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

React page keep footer at the bottom of the page

You need to tell your footer to position itself to the bottom of the surrounding container:

Footer css:

position:absolute;
left:0;
bottom:0;
right:0;

And for the container (the react-root div):

padding-bottom:60px;

As an alternative (if you don't need to support IE 8) you could try this style on the div.container :

height: calc(100% - 60px);

How to Keep Footer at Bottom of Screen