HTML LAYOUT (Basic) - CSS issue

Question

I'm having a small css issue with a basic html layout .

What is want is this : (without content)

With content : http://jsfiddle.net/cge89ef4/2/

As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.

CSS :

body {
    background-color: blue;
        color:red;
    margin: 75px auto 50px;
    height:100%;
}
div#fixedheader {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:75px;
    background:yellow;
}
div#fixedfooter {
    position:absolute;
    bottom:0px;
    height:50px;
    left:0px;
    width:100%;
    background:black;
}

Any way to fix it ?

Thanks

This question might already have an answer here: http://stackoverflow.com/q/42294/1866196 — skrtbhtngr, Jun 10 '15 at 10:26

noa-dev · Accepted Answer · 2015-06-10T10:59:04.833

1

UPDATE

I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing. So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content Also if you scroll down and the header is not visible any more it becomes fixed above the content as well http://jsfiddle.net/cge89ef4/8/

UPDATE END

Here http://jsfiddle.net/cge89ef4/3/

change absolute to fixed for footer

position:fixed;

If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.

In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc

For exampe:

<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>

edited Jun 10 '15 at 10:59

answered Jun 10 '15 at 10:24

noa-dev

3,561
9
34
72

1

I don;t want it fixed all the time . i want it at the bottom if the content is long and if there is no content . then it stays at the bottom fixed – Jimmy Jun 10 '15 at 10:25
If you dont want it fixed you can simply remove the position absolute of the footer like this : http://jsfiddle.net/cge89ef4/5/ If you want to vary between fixed and not fixed you would basically need a small javascript to check whether the content is longer than the viewport, if so -> make it fixed – noa-dev Jun 10 '15 at 10:28
i have edited my original answer and added a little javascript to it so that it fits your needs - see answer – noa-dev Jun 10 '15 at 10:42

Praveen Kumar Purushothaman · Answer 2 · 2015-06-10T10:40:47.343

Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.

body {
    background-color: blue;
    color: red;
    margin: 75px auto 50px;
    height: 100%;
}
div#fixedheader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 75px;
    background: yellow;
}
div#fixedfooter {
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    width: 100%;
    background: black;
}

Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output

score 0 · Answer 3 · answered Jun 10 '15 at 10:26

0

use this styling for your body

body{
    position: relative;
    margin: 0;
}

answered Jun 10 '15 at 10:26

danish farhaj

1,316
10
20

score 0 · Answer 4 · answered Mar 16 '19 at 07:09

0

have the body position: relative;

answered Mar 16 '19 at 07:09

Hiranya

19
6

HTML LAYOUT (Basic) - CSS issue

4 Answers4