Reduce view port height to show footer on screen (without scroll bar)?

Question

Just tinkering with css. I am trying to show the footer on the screen without the need to scroll bar. I do this by trying to minus footer height from content wrapper div. However it is not working.

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
          100% of viewport minus footer height */
    min-height: calc(100vh - 121px);
  }
  .container {
    /*  color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love.
      Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

Any idea why it is not working?

Answer 1

Try max-height instead of min-height and add overflow-y:scroll

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
          100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*  color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }

<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love.
      Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

Answer 2

Have a look at this...

footer.main-footer{
    position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
}

Answer 3

footer.main-footer{
      position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
}

<body>
    <div class="wrap">
            <header class="main-header">
                <div class="container">
                    <h1 class="name"><a href="#">Best City Guide</a></h1>
                    <ul class="main-nav">
                        <li><a href="#">ice cream</a></li>
                        <li><a href="#">donuts</a></li>
                        <li><a href="#">tea</a></li>
                        <li><a href="#">coffee</a></li>
                    </ul>
                 </div>
            </header>

            <div class="container">
                <h2>Welcome!</h2>
                <p>Everything in this city is worth waiting in line for.</p>
                <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

                <h2>Great food</h2>
                <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2015 Residents of The Best City Ever.</p>

    </footer>
</body>

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
          100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*  color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }

<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love.
      Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
          100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*  color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  
  footer.main-footer{
        position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
  }

<body>
    <div class="wrap">
            <header class="main-header">
                <div class="container">
                    <h1 class="name"><a href="#">Best City Guide</a></h1>
                    <ul class="main-nav">
                        <li><a href="#">ice cream</a></li>
                        <li><a href="#">donuts</a></li>
                        <li><a href="#">tea</a></li>
                        <li><a href="#">coffee</a></li>
                    </ul>
                 </div>
            </header>

            <div class="container">
                <h2>Welcome!</h2>
                <p>Everything in this city is worth waiting in line for.</p>
                <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

                <h2>Great food</h2>
                <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2015 Residents of The Best City Ever.</p>

    </footer>
</body>