1. 首頁
  2. 問答
  3. 減少查看端口高度以顯示頁腳（不帶滾動條）？

減少查看端口高度以顯示頁腳（不帶滾動條）？

2017-05-04 61 views
0

只是修補與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>

任何想法，爲什麼它不工作？

來源

2017-05-04 Syed

+0

檢查這個答案http://stackoverflow.com/questions/19756997/how -to-創建-A-粘英尺，即扮演孔與 - 引導-3 –

回答

0

嘗試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>

來源

2017-05-04 07:56:34

0

看一看這個...

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

來源

2017-05-04 07:59:12

0 

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>

來源

2017-05-04 08:02:20

相關問題

 相關問題