CODEWITHSUNDEEP
htmlcss
yeah its me
yeah its me

Reputation: 1141

how to stick a footer without covering the content?

div.footer {

    position: absolute;
    background: silver;
    height: 200px;
    bottom: 0;
}

I've sticked my footer to the bottom of the page, but if the content is long it is covered by this footer, how to avoid that?

Upvotes: 0

Views: 68

Answers (6)

Kroltan
Kroltan

Reputation: 5156

You can add a margin to the bottom of the content area the same as the height of the footer. Take a look at this fiddle: http://jsfiddle.net/X3B4c/2/

HTML:

<div id="content">
    <!-- many lines -->
</div>
<div id="footer">&copy; 2014 SomeCompany Inc.</div>

CSS:

#content {
    height: 100%;
    margin-bottom: 30px; /*same as #footer's height*/
    background: #555;
}
#footer {
    position: fixed;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #999;
}

Upvotes: 1

digitai
digitai

Reputation: 1842

use the z—index property img. {position:absolute; top:0; z-indez:-1;}

Upvotes: 0

PICKAB00
PICKAB00

Reputation: 308

The reason for that maybe because you have position set to absolute. Could you link the full coding of html and css? Here is something which might help.

<!DOCTYPE html>
<html>
</html>
<head>
</head>
<body>

<header></header>
<section></section>
<nav></nav>
<aside></aside>
<footer></footer>

</body>

Just think of this as a 3D object and your footer is coming infront of your elements or body. Use this structure. :)

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

*{
    margin:0;
    padding:0;
}
div.footer {

    position: fixed;
    background: silver;
    height: 200px;
    bottom: 0;
    width:100%;
}

Upvotes: 0

Manoj
Manoj

Reputation: 1890

change the position: absolute to position: fixed

DEMO

div.footer {
    position: fixed;
    background: silver;
    height: 200px;
    bottom: 0;
}

Upvotes: 0

Harshal Bulsara
Harshal Bulsara

Reputation: 8254

one thing You can do is rather then using position:absolute use position:fixed this will stick at that points.

Hope that helps

Upvotes: 0

Related Questions