CODEWITHSUNDEEP
htmlcssvertical-alignment
RDM
RDM

Reputation: 5066

HTML heights and a footer

I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).

OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.

Upvotes: 0

Views: 109

Answers (3)

Jamie Barker
Jamie Barker

Reputation: 8246

A JavaScript/jQuery solution:

function CheckFooterPos() {
    var Footer = $('.color-footer');
    var BottomOfScroll = $('html').scrollTop() + $(window).height();
    var BottomOfFooter = Footer.offset().top + Footer.height();
    if (BottomOfFooter < BottomOfScroll) {
        Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
    } else {
        Footer.css('bottom', '0px');
    }
}

$(document).ready(function() {
    $(window).scroll(function(){
        CheckFooterPos();
    });
    $(window).resize(function(){
        CheckFooterPos();
    });
    CheckFooterPos();
});

Upvotes: 2

Pardeep Dhingra
Pardeep Dhingra

Reputation: 3946

You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.

http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/

and I guesss How to keep footer at the bottom even with dynamic height website this can also help you.

Upvotes: 0

ketan
ketan

Reputation: 19341

Because it's position:absolute so, it will so in the middle of the screen.

Just remove position: absolute; from .color-footer { will solved your issue.

.color-footer {
    bottom: 0;
    height: 66px;
    margin-top: 50px;
    padding-top: 0;
    width: 100%;
//    position: absolute; //remove it.
}

Hope it helps.

Upvotes: 0

Related Questions