CODEWITHSUNDEEP
htmlcssresponsive-design
Xinrui Ma
Xinrui Ma

Reputation: 2105

Just can't make footer stay at the bottom

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.

I have html structure like this: 

<html>
  <body>
    <div class="wrapper">
        ....
    </div>
    <div class="footer" id="cdFooter">
        .......
    </div>   
  </body>
</html>

I tried as Internet said, set the css rules like this

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

.wrapper {
    min-height:100%;
    position: relative;
    overflow:hidden !important;
}
.footer {
    bottom: 0;
    width: 100%;
}

(Some other css rule you can see at below URL, I can't put too much code here.)

but the footer still not at the bottom of the browser if you are using a large screen desktop. You can see the result at this URL: http://dev.xinruima.me/readistep/

Someone says that, I need to set the wrapper has a rule like margin-bottom: **px, but that doesn't work for my site.

Can someone take a look at my URL at see is there a way to solve this nicely? I want it to be responsive so I might not use a fixed height for pushing elements down or stuff like that.

Thanks.

If I use position: absolute, it will overwrite the wrapper. I also use body {height: 100%}, it doesn't work for me. Can someone try to edit on my URL ?

What I think the problem is, if we can make the height of body 100% tall as browser height, just like html did, it will solve the problem, hope so.

Upvotes: 0

Views: 209

Answers (2)

Aaron
Aaron

Reputation: 1208

You have to take it out of normal flow and fix the position. Add this into your footer

position: absolute;

For additional controls you can add

top:

To control the height of the footer.

EDIT: The reason for your overlap is probably because your wrapper does not have a defined height so it overlaps the wrapper since height is undefined, therefore starting from the top.

Another way to do this is also define absolute positioning on the wrapper, then use top and bottom to control the height.

EDIT: Remove min-height from all your properties. You don't need it. This is just messing up other block elements.

min-height: 100%

Try this. 

.wrapper {
    position: relative;
    overflow: hidden
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Here's an example using absolute positioning on both the wrapper and the footer. http://jsfiddle.net/mLRq3/

Instead of thinking "height of body 100% tall as browser height", think of attaching a footer at the bottom no matter what the body or browser height is. This way, it doesn't matter how tall/big/small/wide the browser is since you're always starting from the bottom.

Upvotes: 0

Andrei Volgin
Andrei Volgin

Reputation: 41089

You did not specify how your footer should be displayed. You also need to change the height of your body element:

body {
    height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Upvotes: 3

Related Questions