How to make footer stay at bottom of web page

Question

I am working on a web application and I am trying to keep my footer with text at the very bottom of the page.

I don't want it to move at all, just to always be at the bottom of the page, no matter the size of the page. As of right now, it works great with most browsers, but once I switch to mobile, it moves to the side of the side of the page.

How would I keep it at bottom for mobile as well?

Thanks!

<html>
<body>
    <footer>
       <div class="container" style="position:absolute; bottom:0px; left:520px;">
        <p>Thank you and Goodbye</p>
      </div>
    </footer>
</body> 
</html>

https://getbootstrap.com/examples/sticky-footer/ – hydrococcus Apr 21 '17 at 07:39 — hydrococcus, Apr 21 '17 at 07:39

score 0 · Answer 1 · answered Apr 21 '17 at 07:38

0

Include this in your footer:

position:fixed;

answered Apr 21 '17 at 07:38

Vlusion

79
1
14

1

I tried this before, but the text will follow when I scroll. – Carbon Apr 21 '17 at 07:45
@Carbon Okay, well, try other snippets around here, hope that helps. Succes – Vlusion Apr 21 '17 at 07:46

score 0 · Answer 2 · answered Apr 21 '17 at 07:42

0

.container
{
 bottom: 0px;
 position: fixed;
}

answered Apr 21 '17 at 07:42

Kashyap Patel

1,139
1
13
29

Please edit your answer to include some explanation. Code-only answers do very little to educate future SO readers. Your answer is in the moderation queue for being low-quality. – mickmackusa Apr 21 '17 at 16:55

score 0 · Answer 3 · answered Apr 21 '17 at 07:44

In a responsive design, you shouldn't have to set exact pixels for placing elements. In a mobile screen the width is much smaller, and that could be the cause of the footer moving to the side. Rather, something like this should be more appropriate based on your use-case:

<div class="container" style="position:absolute; bottom:0px; text-align:center;">
    <p>Thank you and Goodbye</p>
</div>

If the content can be something other than the text here, an automatic margin, margin: auto;, can be useful.

score 0 · Answer 4 · answered Apr 21 '17 at 07:44

HTML PART:

<html>
    <body>
        <div id="content">
            <div id="main"></div>
        </div>
        <div id="bottom"></div>
    </body> 
</html>

The CSS:

* {
  margin: 0;
  padding: 0;
} 

html, body {
  height: 100%;
}

#content {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px; 
}

#bottom {
  position: relative;
  margin-top: -180px;
  height: 180px;
  clear: both;
}

Carl Angelo Nievarez · Accepted Answer · 2017-04-21T08:11:29.730

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>

I dont want a sticky footer, I just want my footer to stay at the very bottom of the page. I don't want the footer text to follow as I scroll up. I want a normal footer, but my problem is when I access my web site via mobile, the footer gets placed somewhere on the right side of the page — Carbon, Apr 21 '17 at 17:35
Please try to remove the following style="position:absolute; bottom:0px; left:520px;". — Carl Angelo Nievarez, Apr 22 '17 at 00:52

score 0 · Answer 6 · answered Apr 21 '17 at 07:55

0

footer{position:absolute;bottom:0px;}

<html>
<body>
    <footer>
       <div  class="container">
        <p>Thank you and Goodbye</p>
      </div>
    </footer>
</body> 
</html>

answered Apr 21 '17 at 07:55

v-stackOverFollower

575
3
12

score 0 · Answer 7 · answered Apr 21 '17 at 08:09

Guess The question is to fix the footer in bottom. The content size may vary but the footer must be visible always and it should be fixed. Here is the code. Hope it will be usefull. The background color are given just to differentiate sections.

 <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="col-md-12">
            <div class="col-md-12" style="background-color:grey;height:1000px;">Content Here</div>
        </div>
        <footer>
    <div class="col-md-12 container" style="position:fixed; BOTTOM:0px;background-color:red;">
        <p class="pull-right">Thank you and Goodbye</p>
    </div>
    </footer>
    </body>
    </html>

When I do fixed position, the text scrolls and always stays in my view. I don't want that to happen. I want the text to always statically stay on the bottom of the page, not my view. — Carbon, Apr 21 '17 at 17:32

How to make footer stay at bottom of web page

7 Answers7