减少查看端口高度以显示页脚（不带滚动条）？

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. 
 
    \t \t  100% of viewport minus footer height */ 
 
    min-height: calc(100vh - 121px); 
 
    } 
 
    .container { 
 
    /* \t \t 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. 
 
    \t \t  100% of viewport minus footer height */ 
 
    max-height: calc(100vh - 121px); 
 
    overflow-y: scroll; 
 
    } 
 
    .container { 
 
    /* \t \t 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. 
 
    \t \t  100% of viewport minus footer height */ 
 
    max-height: calc(100vh - 121px); 
 
    overflow-y: scroll; 
 
    } 
 
    .container { 
 
    /* \t \t 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. 
 
    \t \t  100% of viewport minus footer height */ 
 
    max-height: calc(100vh - 121px); 
 
    overflow-y: scroll; 
 
    } 
 
    .container { 
 
    /* \t \t 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>