CODEWITHSUNDEEP
htmlcss
user1379533
user1379533

Reputation:

My footer is stuck at the bottom of the viewport

I'm creating a website for a client. You can see it here: //removed link after closed answer.

But I have same troubles with my footer.

It's stuck at the bottom of the borwsers wievport, not the buttom of my page. If you try to zoom the browser in and out, you will see the problem.

I've tried placing my footer outside of my main-wrapper, but with the same result.

My footer css:

#footer {
    position: absolute;
    width: 1297px;
    background-color: #fff;
    z-index:2;
    height: 100px;
    left:50%;          
    margin-left:-648.5px;
    bottom:0px; 
}

EDIT:

I have added the fixed position on the website now. But I still have the same issue.

With position fixed, then the footer will always be visible to the bottom of the screen. I need it to be at the bottom of the page. So it will never overlap my #sub-container

EDIT 2

I have moved my footer outside my main-wrapper and my footer now looks like this:

#footer {
    background-color: #fff;
    position:absolute;
    left:50%;  
    bottom:0;
    height: 100px;
    width: 1297px;
    z-index:2;          
    margin-left:-648.5px;
    overflow:hidden;
}

Upvotes: 3

Views: 1383

Answers (2)

Arjun Chaudhary
Arjun Chaudhary

Reputation: 2453

Real ANSWER in authors word

Thanks, I fixed it by putting my footer in the main-wrapper. Giving the main-wrapper a height:auto; instead of 100% and then said position:relative; for the footer

you can use absolute

DEMO

OR

You have position:absolute set on your div, which will only ever use its CSS height value for the amount of space it takes up, regardless of its actual content. Removing that absolute position should solve your problems. There's (almost) always a way around absolute positioning. In your example, it seems completely unnecessary

Why not using: { position: fixed; bottom: 0 }

Upvotes: 1

nicael
nicael

Reputation: 18995

Try to use 

position:fixed;

instead of

position:absolute;

And place bottom:0px; right after position:fixed;. Hope it helps.

Plus experiment with body height:

body{height:1000px;/* or more, or less*/}

Change its value until your footer wouldn't make other body invisible.

Upvotes: 0

Related Questions