CODEWITHSUNDEEP
css
Bruno Kos
Bruno Kos

Reputation: 645

Footer on the bottom - 100% height

I am working on this site - http://agencymaiclientpages.com/phononic/cms/

One of the requirements is that footer goes to the bottom of the page. I know there are height:100% values on body and html required, but whichever combination I tried (there are several element within content area) - it just doesn't work. I tried putting all the main content into 100%, nothing, tried several elements within stack, still nothing. What am I doing wrong? Or perhaps, what am I missing?

I even tried to remove some of the elements (#primary) so the stacking isn't so "high", but the footer either goes below the screen (so scrolling is required) or stays just below the main content area.

Upvotes: 0

Views: 307

Answers (4)

Jiteen
Jiteen

Reputation: 427

Try this code, it will help :

.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}

The position: absolute; and bottom : 0px; will make the footer to be placed at the foo of the page.

Upvotes: 1

Tony Barnes
Tony Barnes

Reputation: 2643

You need fixed positioning. This will ensure your footer is at the bottom of the page:

.site-footer {
  position:fixed;
  bottom:0;
  width:100%;
  max-width:100%;
}

But be careful, if the window height is 'small', it will cut of the main content. So depending on your main content, you could only apply the fixed positioning after a certain vertical height, for example something like this:

@media (min-height:600px) {
  /*fixed positioning here*/
}

Upvotes: 1

J Prakash
J Prakash

Reputation: 1333

The footer comes to the bottom.

CSS :

.site-footer {
    bottom: 0;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    font-size: 1.4rem;
    text-align: center;
    color: #ddd;
}

Remove padding and margins from some places so that all the main contents come in one page . for example:

.site-footer {
     padding: 1em 0;
}
.menu-main-container {

    margin-top: 30px;
}
p {
    margin-bottom: 1.5em;
}

Because your footer doesnot have any background color so when main content div is bigger the footer overlaps it and doesn't look good.

Upvotes: 1

ITChristian
ITChristian

Reputation: 11271

Something like:

.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}

?

Your question needs more info...

Upvotes: 1

Related Questions