html - Bootstrap: 100% height footer -

i have issue height of footer.

on mobile website footer expect when take on desktop background color gone.

and see on desktop:

here 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 help!

few things.

you remove footer footer .widget-*whatever* scene browser select class .widget-*whatever* - it's totally you.

second thing, change height min-height please make sure container footer in has set height otherwise having percentage height pointless (because how can browser take percentage of nothing?). having min-height, force element @ least 100% - meaning if don't fill full space, you'll have blank space @ bottom if use max-height, set height given or less, meaning looks normal, if fits in given space.

hopefully, answer sorts problem.

css you.

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

you may want try max-height , min-height , see 1 works best you.