CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Tomasz Cysewski
Tomasz Cysewski
2,736 Points

Setting fixed footer - Why in my case proper min-height is 130px instead of 114px?

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
  <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<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>
</html>
*{
  box-sizing: border-box;
}


.container{
  padding: 0 1em;
}

.name{
    margin-top: 0;
}
.main-header {

  background: #3acec2;
}

.main-footer {
  text-align: center;
  padding: 2em 0;
  background: grey; 
}

@media (min-width: 700px){
  .wrap{
    min-height: calc(100vh - 130px);
  }
  .container{
      width: 70%;
      max-width: 1000px;
      margin: 0 auto;
  }
}

As I looked with chrome tools height of footer is 114 and that's value should be substracted from 100vh. How ever that code adds scrollbar-y. Why is that? Only value 130 works properly. I understand that paragraphs inside can cause that(margin: 16px 0;). But I used box-sizing. Thanks for help.

Gustavo Winter
Gustavo Winter
Pro Student 27,382 Points

It is necessary to take into account that the tool itself takes up a space (pixel) is probably what is causing the difference of values

By the way, if isnt it please post the correct answer for i can see too

1 Answer

But where did you set min-height of footer to 114 or where did you get these numbers? The only thing I see now it top and bottom padding of 2ems.