CODEWITHSUNDEEP
csshtml
user3396295
user3396295

Reputation: 35

set footer on the bottom of the page

I have different size of page in my website

How do I set the footer always on the bottom of the page?

Please notice that I need it on the bottom of the page and not on the bottom of the screen, so if I have short screen it will be at the bottom of it, and if I have long, scroll, page I'll see the footer only if I'll scroll down.

Thanks

<footer>
    <?PHP include "footer.php"; ?>
</footer>

css:

footer {
    background: #294a2d; 
    width:100%;
    height: 180px; 
    color: #fff;
    margin-top: 50px;
}

Upvotes: 0

Views: 95

Answers (4)

Alexander Schranz
Alexander Schranz

Reputation: 2458

I use ryan fait's sticky footer:

http://ryanfait.com/sticky-footer/

Upvotes: 0

web-tiki
web-tiki

Reputation: 103810

You can use position:absolute; on the footer and min-height on the body tag like this :

FIDDLE <-- with little content FIDDLE <-- with a lot of content

HTML :

<div>... Content ...</div>
<footer>... Footer ...</footer>

CSS :

   html{
    height:100%;
    width:100%;
    margin:0;
}
body {
    width:100%;
    min-height:100%;
    margin:0;
    position:relative;
}
div {
    padding-bottom:100px;
}
footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:gold;
}

Upvotes: 1

BlackPearl
BlackPearl

Reputation: 2795

Try this

html {
   position: relative;
   min-height: 100%;
}

body {
   margin: 0 0 100px; /* bottom = footer height */
   padding: 25px;
}


footer {
  background-color: green;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  overflow:hidden;
}

<footer> <h1>Footer Content</h1> </footer>

Upvotes: 0

Beginner
Beginner

Reputation: 153

you should use this 

footer {
position : absolute ;
bottom : 0 !important ;
background: #294a2d; 
width:100%;
height: 180px; 
color: #fff;
margin-top: 50px;
}

Upvotes: 0

Related Questions