CODEWITHSUNDEEP
htmlcss
care567
care567

Reputation: 231

how to create a fixed footer with HTML on bootstrap

In the below html the footer is not appearing fixed at the bottom of the page.

How do i fix this?

I have designed a sample website with a log and a menu in the middle. and now i need to add text to the page, but the footer needs to be stationary at the bottom. but currently the footer is rendering next to the text. Can any one please help me

html

<div  style="margin-top: 578px; font-size: 31px; max-width:100%;margin:0 auto; float:left; color: orange;">UNDER CONSTRUCTION</div>
<footer>
<div class="footer">
    <div class="container">
        <p>Address:- D-000, Text Text, Text. Text, Text (Text), Text-000 0000, Text <br>
Mobile : +91 000-000-0000 Phone : + 0000 0000 0000 Fax : + 0000 0000 0000 <br>
Email: [email protected]<br>
Copyright &copy; 2015 OLISVELL, Inc.</p>

    </div>
</div>
</footer>

style

.footer {
color:#EEEEE; 
font: italic 12px/30px Arial;
position: relative;
 width: 100%; 
  float: left;
 bottom: 0; 
  padding-bottom: 2px;
  min-height: 43px;

background:#000000;
}

.footer p{

color:#ffffff;

font-weight:600;
float:left;
text-align:left;

}

Upvotes: 1

Views: 296

Answers (4)

Keval Bhatt
Keval Bhatt

Reputation: 6322

See this example :http://jsfiddle.net/kevalbhatt18/06rggkLb/1/

Difference between absolute and fixed position

In your example your css correct only you need to change position. i.e position: relative to position: fixed

And you are using bootstrap see this bootstrap solution

http://getbootstrap.com/examples/sticky-footer/ they are using position: absolute

If you use absolute then make sure your footer is not in any div which has some position. so if you apply position absolute then place your footer in body

.footer {
    color:#EEEEE;
    font: italic 12px/30px Arial;
    position: fixed;
    width: 100%;
    float: left;
    bottom: 0;
    padding-bottom: 2px;
    min-height: 43px;
    background:#000000;
}

Upvotes: 1

spreadzz
spreadzz

Reputation: 278

Assuming that the body element is the footer parent if not, then the styles applied to the body needs to be applied to the parent.

body{
  height:100%;
  position:relative;
}

footer{
  width:100%;
  position:absolute;  // or fixed, depending on your use
  bottom:0;
  left:0;
}

Upvotes: 2

EltonFlow
EltonFlow

Reputation: 111

You could alternatively use:

.footer {
    position:fixed; 
    bottom:0;
}

If you want the footer fixed to the viewport window and always visible.

Upvotes: 1

Nikhil Batra
Nikhil Batra

Reputation: 3148

Add the following styles to the footer class:

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

See the fiddle: "http://jsfiddle.net/fw3dd4gd/"

Upvotes: 1

Related Questions