title: Bootstrap responsive footer with full screen background
body: <p>I have made website with full screen carousel, navbar and footer. Navbar and image are good but for footer i had scroll can we make make size in such way that footer come in 1 screen without scroll</p>
  
  <p><code>CSS Code</code></p>
  
  <pre><code>html, body { height: 100%;}
  .navbar .nav, .navbar .nav &gt; li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; }
  .navbar-inner { text-align:center; }
  .navbar-nav { font-size:12px;}/*font-family:eurostileregular; */
  .navbar {min-height:45px;}
  .navbar-inverse { background: rgba(0, 0, 0, 0.5);}
  .carousel, .item, .active { height: 100%; }
  .carousel-inner { height: 100%; }
  .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;}
  .nav li.active a,.nav li:hover a { background:none !important; box-shadow:none !important; border-bottom:2px solid #ad1f2d; padding-bottom: 1px; display:block; }
  footer { height:40px;text-align:center;line-height:40px;background-color: #000000;width:100%;color:#fff;position: absolute;left: 0;right: 0;font-size:12px;}
  .redBorder { height: 2px; background-color: #ad1f2d; width: 100%; position: absolute; }
  </code></pre>
  
  <p><code>HTML Code</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
  
    &lt;title&gt;Demo&lt;/title&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;
  
    &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;/div&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;PROFILE&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;BUSINESS SOLUTIONS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;PARTNERS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;CAREERS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;header id="myCarousel" class="carousel slide"&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;div class="fill" style="background-image: url('images/homepage_slide1.jpg');"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="fill" style="background-image: url('images/2.jpg');"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="fill" style="background-image: url('images/3.jpg');"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="container"&gt;
      &lt;!-- Footer --&gt;
      &lt;footer class="container-fluid"&gt;
        &lt;div class="row redBorder"&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            Copyright PLEXUS 2016. All rights reserved.
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
      &lt;/footer&gt;
  
    &lt;/div&gt;
    &lt;!-- /.container --&gt;
    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $('.carousel').carousel({
        interval: 5000 //changes the speed
      })
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can we do some CSS on myCarousel to make it responsive</p>