Sticky footer. html

Question

I have this very simple footer :

.footer{
    width:100%;
    background-color:#333;
    height:100px;
    position: absolute;  
    bottom: 0px; 
}

and this container :

.container{
    position:relative;
    height:100%;
    width:980px;
    margin:0px auto;
}

The container's (content) height is 100% so it is based on the amount of results you get from your search query. I want the footer to stick underneith the container at all time. And when you have no results I just want to have it at the bottom of the screen.

I tried to give the container a padding-bottom the height of the container and change the posistion but it didn't help. Does anyone has an idea how to solve this?

How about using a little JQuery ? [JSFiddle](http://jsfiddle.net/d9uFY/) — Vucko, Apr 24 '13 at 07:12

score 3 · Accepted Answer · answered Apr 24 '13 at 07:07

3

try this:

.footer{ width:100%; background-color:#333; height:100px; position: fixed;
bottom: 0px; }

Changing position absolute with fixed

DEMO

answered Apr 24 '13 at 07:07

Alessandro Minoccheri

35,521
22
122
171

that dindt change anything, still stciks at the bottom of the screen, and doesnt adjust to the height of the container – DiederikEEn Apr 24 '13 at 07:11

score -1 · Answer 2 · edited May 23 '17 at 11:43

-1

see this CSS to make HTML page footer stay at bottom of the page with a minimum height

and http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I hope this will helpful for you.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 24 '13 at 07:14

Pawan Lakhara

1,146
4
16
28

When I have 0 results its just floating half-way like the image. Any clue? – DiederikEEn Apr 24 '13 at 07:29
Tried, dindt work. I tried it in a jsfiddle and it worked, but as soon as my gridview gets more then 20 results the footer stil floats – DiederikEEn Apr 24 '13 at 07:49
make a jsfiddle of your design – Pawan Lakhara Apr 24 '13 at 07:56
try this .container{ position:relative; height:auto; width:980px; margin:0px auto; } give height:auto;. – Pawan Lakhara Apr 24 '13 at 07:58
@Pawan JSFiddle doesnt allow ASP.NET. the mark-up is identical to to your first link. Except that the asp.net gridview doesnt seem to recognice any height – DiederikEEn Apr 24 '13 at 08:00

Sticky footer. html

2 Answers2