How to put footer on bottom on page permanently

Question

How do I write inside my footer and keep it at the bottom of the page?

.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
}

<footer class="underbar">

</footer>

I need it like this: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm — Munksgaard, Sep 29 '16 at 10:44

score 1 · Answer 1 · answered Sep 29 '16 at 10:33

1

.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position: fixed;
}

Add Property position:fixed;

answered Sep 29 '16 at 10:33

Darshan Prajapati

66
7

I need it like this: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard Sep 29 '16 at 10:44

score 0 · Answer 2 · answered Sep 29 '16 at 10:32

0

Use position:fixed property

.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
 position:fixed;
}

<footer class="underbar">

</footer>

answered Sep 29 '16 at 10:32

Dhaarani

1,350
1
13
23

Ganesh Putta · Answer 3 · 2016-09-29T10:35:01.003

0

i have tried, check may be this will help u

.underbar {
bottom:0;
width:100%;
height:60px;
  padding:0px;
  margin:0px;
background:#000000;
  position:fixed;
}

<footer class="underbar">

</footer>

edited Sep 29 '16 at 10:35

answered Sep 29 '16 at 10:32

Ganesh Putta

2,622
2
19
26

why scroll appear.@Ganesh Putta – Dhaarani Sep 29 '16 at 10:33
thank u, and i edited my code, plz take a look @Dhaarani – Ganesh Putta Sep 29 '16 at 10:35
@ Ganesh Putta okay – Dhaarani Sep 29 '16 at 10:39
I need it like this: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard Sep 29 '16 at 10:44

score 0 · Answer 4 · answered Sep 29 '16 at 10:34

0

You can add the position property in the css.

.underbar {
position:fixed;
bottom:0;
width:100%;
height:60px;
background:#000000; 
}

And you can put your text inside the footer tag.

<footer class="underbar">
    Your text here
</footer>

answered Sep 29 '16 at 10:34

user5478656

266
1
2
9

I need it like this: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard Sep 29 '16 at 10:41

score 0 · Answer 5 · answered Sep 29 '16 at 10:37

0

You can use the following:

position: fixed;
right: 0;
bottom: 0;
left: 0;

and it will work!

Below you may find a jfiddle example for your code:

https://jsfiddle.net/2wqrg2zu/

answered Sep 29 '16 at 10:37

lampropoi

131
7

I need it like this: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard Sep 29 '16 at 10:41

score 0 · Answer 6 · answered Sep 29 '16 at 10:46

<style>
            .underbar {
                 bottom:0;
                 width:100%;
                 height:60px;
                 background:#000000;
                 position: fixed;
                }
         </style>

<HTML>
     <HEAD>
         
    </HEAD>
    <BODY>
        <footer class="underbar">
         footer
        </footer>
    </BODY>
</HTML>

score 0 · Answer 7 · edited Sep 29 '16 at 11:06

check it

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ff0 none repeat scroll 0 0;
  padding: 10px;
}
#body {
  padding: 10px 10px 60px;
}
#footer {
  background: #6cf none repeat scroll 0 0;
  bottom: 0;
  height: 60px;
  position: absolute;
  width: 100%;
}
#header p,
#header h1 {
  margin: 0;
  padding: 10px 0 0 10px;
}
#footer p {
  margin: 0;
  padding: 10px;
}

<div id="container">
  <div id="header">
    <!-- Header start -->
    <p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>
    </p>
    <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
    <!-- Header end -->
  </div>
  <div id="body">
    <!-- Body start -->
    <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade
      gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
    <!-- Body end -->
  </div>
  <div id="footer">
    <!-- Footer start -->
    <p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
    <!-- Footer end -->
  </div>
</div>

@Munksgaard now check it. use position:absolute – Dhaarani Sep 29 '16 at 10:49 — Dhaarani, Sep 29 '16 at 10:49

Santosh Khalse · Answer 8 · 2016-09-29T10:54:52.340

* {
 margin: 0;
}
html, body {
 height: 100%;
}
.wrapper {
 min-height: 100%;
 margin: 0 auto -60px; 
        background:green;
}
footer{
 height: 60px; 
        background:#000000;
        color:#ffffff;
        text-align:center;

}

.push {
 height: 60px; 

}

header{
  background:gold;
}

<!DOCTYPE html>

<div class="wrapper">

    <header>
 <h1>Fixed Footer</h1>
    </header>
             
    <div class="push"></div>
              
  </div>
  
   <footer>
       <h5>
       Fixed Footer
       </h5>
  </footer>

score -1 · Answer 9 · answered Sep 29 '16 at 10:35

First add these scripts to your document.

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>

And then add the class "footer navbar-fixed-bottom" to the footer. Thats should work.

<footer class="footer navbar-fixed-bottom"> </footer>

How to put footer on bottom on page permanently

9 Answers9