Bootstrap：100％高度的页脚

Question

I have an issue with the height of my footer.

On the mobile website the footer is as I expect but when I take a look on desktop the background color gone.

And this is what I see on my desktop:

Here is my code:

  footer { background-color: #232323; height: 100%; border-top: #ebe050 5px solid; } footer .widget-title { color: #ebe050; } footer .widget-content { color: #eaeaea; } 

  <div class="row"> <footer> <div class="col-md-4"> <div class="widget-title"> <h3>About us</h3> </div> <div class="widget-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p> </div> </div> <div class="col-md-4"> <div class="widget-title"> <h3>About us</h3> </div> <div class="widget-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p> </div> </div> <div class="col-md-4"> <div class="widget-title"> <h3>Categories</h3> </div> <div class="widget-content"> <ul> <li>Girl vs Girl</li> <li>MMA</li> <li>WWE</li> <li>Street</li> <li>Sparring</li> </ul> </div> </div> </footer> </div> 

Thank you very much for your help!

Answer 1

Few things.

You could remove footer from footer .widget-*whatever* scene as the browser will just select anything with the class .widget-*whatever* - but it's totally up to you.

Second thing, what you could do is change height to min-height but please make sure that the container the footer is in has a SET HEIGHT otherwise having a percentage for your height will be pointless (because how can the browser take a percentage of nothing?). Having min-height , this will force the element to be at least 100% - meaning if you don't fill the full space, you'll have blank space at the bottom but if you use max-height , it will be the set height given or less, meaning everything looks normal, if it fits in the given space.

Hopefully, this answer sorts your problem.

CSS for you.

footer {
    background-color: #232323;
    min-height: 100%; /*Make sure the container for the footer has a set height*/
    border-top: #ebe050 5px solid;
}
.widget-title {
    color: #ebe050;
}
.widget-content {
    color: #eaeaea;
}

You may want to try max-height and min-height and see what one works best for you.

Answer 2

Put the div class="row" inside the footer Tag, so the footer should contain the rows and cols.

UPDATE: Working example: http://www.bootply.com/render/ZnruhjLe8C