Creating a page footer div?

Question

I need to create a page footer, basically a div that stretch 100% width of the page. With a height of 300px. I need it to stick to the absolute bottom of the page. Could somebody please show me how to do this using CSS?

I have not included code as the code would simply be div tags.

Thanks

Have you tried anything yet? Some css code or anything like, except for simply your `
` tags? :P — kushpf, Feb 03 '14 at 09:57
Hi - there are a hundred articles on how to do just this. A quick Google is all you need. — Sinister Beard, Feb 03 '14 at 09:57
create dive with your given dimention add to css position:fixed; — Vikas Gautam, Feb 03 '14 at 09:57
possible duplicate of [Fix footer to bottom of page](http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page) — Drumbeg, Feb 03 '14 at 10:46

score 0 · Answer 1 · answered Feb 03 '14 at 09:57

0

div {
    background-color:red;
    height:300px;
    position:fixed;
    bottom:0;
    width:100%;
}

answered Feb 03 '14 at 09:57

Ergec

11,608
7
52
62

score 0 · Answer 2 · answered Feb 03 '14 at 09:58

If you are wanting a sticky footer, then you want to use the css position style fixed

e.g.

div#footer{
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
}

With this, you would probably also want to set a padding of 300px on the content of the website, so if a user scrolls to the bottom, then they can see the bottom of the content without the footer overlapping it. You would also want to play about with your z-index to make sure nothing is appearing infront of the footer.

score 0 · Answer 3 · answered Feb 03 '14 at 09:58

0

I created a fiddle for you: http://jsfiddle.net/X9gMD/

This is how the css could look like

.footerDiv{
width:100%;
height:300px;
background-color: yellow;
position: absolute;
bottom:0px;
}

answered Feb 03 '14 at 09:58

Franky

323
2
10

score 0 · Answer 4 · answered Feb 03 '14 at 09:59

0

JSFiddle: http://jsfiddle.net/Z6HMb/

Simple HTML example:

<div id="footer">This a footer text</div>

CSS

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

answered Feb 03 '14 at 09:59

ThatsRight

175
7

score 0 · Answer 5 · answered Feb 03 '14 at 10:00

Use position fixed(fiddle).

CSS:

body {
    background-color: blue;
    height: 2000px;
}

div {
    background-color: red;
    position: fixed;
    height: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML:

<body>
    <div>Footer</div>
</body>

score 0 · Answer 6 · answered Feb 03 '14 at 10:00

0

To fix the footer use position: fixed CSS property. Something like following shall help.

footer.div{
    height:300px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
}

Hope that helps :)

answered Feb 03 '14 at 10:00

kushpf

1,078
10
22

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

If you set the footer to position: fixed, it will appear above your content, even if the page is longer than the window.

If what you want is only to keep the footer at the bottom, even when the content is really short, there's that answer : Sticky footer on Stack overflow

That way, your footer will stay at the bottom of the page OR at the end of the content.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 03 '14 at 10:03

Manuszep

813
11
20

Creating a page footer div?

7 Answers7