减少视口高度以在屏幕上显示页脚（没有滚动条）？

Question

只是修补 css。我试图在屏幕上显示页脚而不需要滚动条。我通过尝试从内容包装器 div 中减去页脚高度来做到这一点。但是它不起作用。

@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>

知道为什么它不起作用吗？

Answer 1

尝试使用max-height 代替min-height 并添加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

看看这个...

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>