Hello

I have been searching for hours through the Internet and the issues for this theme but cannot seem to fix my problem. I've tried the solutions given that I have found but they are not working.

I'm using Omega 3. I've placed one block in each of footer 1st 2nd and 3rd and I've given a gradient background to .section-footer.

however on pages with no or little content, and on big screens my footer has a large white area underneath rather than being at the very bottom of the page. However on the pages with lots of content, the footer positions correctly where I want it at the bottom.

I'd rather have the blank white space above the footer on pages that do not have a lot of content. Are you able to tell me how to fix this or which is the best issue that will help me fix this?

This is happening with all browsers and mobile devices.

Thanks v much, great theme by the way.

Comments

carlbowles100’s picture

carlbowles100 CreditAttribution: carlbowles100 commented
Issue summary: View changes
carlbowles100’s picture

carlbowles100 CreditAttribution: carlbowles100 commented

The best solution I've found is to add the following to global.css...

HTML, BODY {
  height: 100%;
}

#page {
  min-height: 100%;
  position: relative;
}

#section-content {
  padding-bottom: XX;
}

#section-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: XX;
}

However after playing around with the above code, that cuts off some of the content

badmuzza’s picture

badmuzza CreditAttribution: badmuzza commented

Using firebug's select element tool and selecting that area you can see a reference to a .js class. I called that within the .css file and used the background-color tool to color it black in my case. Should work for you too.

.js {
background-color: #000000;
}