title: Getting the footer to stay at the bottom
body: <p>I know this has been asked a million times and I thought I had done it right, but when my friend checked my site out on his screen there was a gap between the footer and the bottom of his screen, because on my screen it sits perfectly.</p>
  
  <p>The php code is from laravel, but I think this is a css issue.</p>
  
  <p>I can't see where I went wrong with this.</p>
  
  <p>My css</p>
  
  <pre><code>html, body{
      height: 100%;
      width: 100%;
  }
  
  .container-fluid {
      padding-right: 0;
      padding-left: 0;
      padding-bottom: 20px;
  }
  
  .contact_wrapper {
      background: #fff none repeat scroll 0 0;
      height: 234px;
      position: absolute;
  }
  </code></pre>
  
  <p>My template</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- BEGIN MENU SECTION --&gt;
              &lt;nav class="navbar navbar-default main_menu_wrapper"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
  
                          &lt;a href="{!! url('/') !!}" class="navbar-brand"&gt;
                              &lt;img src="{!! asset("img/logo-for-site2.jpg") !!}"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;div class="collapse navbar-collapse menu_wrapper" id="bs-example-navbar-collapse-1"&gt;
                          &lt;form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search"&gt;
                              {{ csrf_field() }}
  
                              &lt;div class="form-group"&gt;
                                  &lt;input type="text" class="form-control" name="search" placeholder="Search..."&gt;
                              &lt;/div&gt;
  
                              &lt;button type="submit" class="btn btn-default"&gt;
                                  &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/form&gt;
  
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              @foreach($menus_child as $grandfather)
                                  @if($grandfather-&gt;menu_id)
                                      &lt;li&gt;
                                  @elseif($grandfather-&gt;title == 'Home')
                                      &lt;li class="parent {!! menu_active($grandfather-&gt;id) !!}"&gt;
                                  @elseif(count($grandfather-&gt;menusP()-&gt;where('menu_id', '&gt;', 0)-&gt;get()))
                                      &lt;li class="dropdown {!! menu_active($grandfather-&gt;id) !!}"&gt;
                                  @else
                                      &lt;li class="parent {!! menu_active($grandfather-&gt;id) !!}"&gt;
                                  @endif
  
                                  @if(count($grandfather-&gt;menusP()-&gt;where('menu_id', '&gt;', 0)-&gt;get()))
                                      &lt;a href="{!! url(getSeoLink($grandfather-&gt;id)) !!}" class="dropdown-toggle hidden-xs hidden-sm hidden-md desktop_dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                                          {!! $grandfather-&gt;title !!} &lt;span class="caret"&gt;&lt;/span&gt;
                                      &lt;/a&gt;
  
                                      &lt;a href="javascript:void(0);" class="dropdown-toggle visible-xs visible-sm visible-md mobile_dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                                          {!! $grandfather-&gt;title !!} &lt;span class="caret"&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  @else
                                      {!! Html::link(getSeoLink($grandfather-&gt;id), $grandfather-&gt;title) !!}
                                  @endif
  
                                  @if(count($grandfather-&gt;menusP))
                                      &lt;ul class="dropdown-menu desktop"&gt;
                                          @foreach($grandfather-&gt;menusP as $father)
                                              @if($father-&gt;menu_id)
                                                  &lt;li class="parent_child"&gt;
                                              @else
                                                  &lt;li&gt;
                                              @endif
  
                                              {!! Html::link(getSeoLink($father-&gt;id), $father-&gt;title) !!}
                                          @endforeach
                                      &lt;/ul&gt;
                                  @endif
                              @endforeach
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;!-- END MENU SECTION --&gt;
  
          &lt;!-- BEGIN CONTENT SECTION --&gt;
          @yield('content')
          &lt;!-- END CONTENT SECTION --&gt;
  
          &lt;!-- BEGIN FOOTER SECTION --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 contact_wrapper"&gt;
                  @include('contact::contact')
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- END FOOTER SECTION --&gt;
  
  
      &lt;/div&gt;
  </code></pre>