CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Navneet Singh
Navneet Singh
2,424 Points

min-height, calc not fixing Scroll issue.

how to get rid of this scroll bar after adding sticky footer.? What's wrong with my CSS code?

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/stylesheet.css">
<title>Best City Guide</title>
</head>


<body>

  <header class="main-header">
    <div class="wrap">
    <h1 class="name"><a href="#"> Best City Guide </a> </h1>
    <ul class="navigation">
      <li> <a href ="#"> Ice Cream </a> </li>
      <li> <a href ="#"> Donut </a> </li>
      <li> <a href ="#"> Tea </a> </li>
      <li> <a href ="#"> Coffee </a> </li>
    </ul>
  </header>
 <div class="container">
  <main>
    <h2> Welcome!</h2>
    <p>Lorem ipsum dolor sit amet, cum eius ancillae eleifend ut, mel eu ullum aeque,
      dicam deserunt forensibus mel eu. Vim dolorum omnesque posidonium et.
      His omnis nostrum ad, eu qui modus maluisset. Et accusamus consequat nec,
      eu eam eius legere nusquam, aliquam sensibus has et. Vix ea vocent dissentias,
      tota option torquatos te usu, per nemore minimum ei. Vix te alia vide ignota.
    </p>
  </main>

<section>
  <h2> The Food </h2>
  <p>Summus dolor plures dies manere non potest? Sed ad haec, nisi molestum est,
     habeo quae velim. Sed tamen enitar et, si minus multa mihi occurrent,
     non fugiam ista popularia. Quia nec honesto quic quam honestius nec turpi
     turpius.
  </p>
</section>
</div>
</div>

  <footer>
    <span> &copy;2020 For more information, Please visit again.</span>
  </footer>

</body>

</html>
*{
  box-sizing: border-box;
}

body{
  color:#3a3a3a;
  margin-bottom: 0;
}

a{
  color: #fff;
  text-decoration: none;
}

.wrap {
  width:70%;
  margin:0 auto;
}
  .container {
    width:70%;
    margin:0 auto;
    min-height: calc(100vh - 82px);
  }

section{
  margin-bottom: 0;
}

.main-header{
  background-color:#3acec2;
  padding:40px 0;
}


h1{
  margin:0;
  padding:0;
}


footer{
  background-color:#d9e4ea;
  padding:2em 0;
  text-align:center;
}

6 Answers

Huzaifa Sajjad Malik
PRO
Huzaifa Sajjad Malik
Pro Student 10,823 Points

What I think you are using the 82px value which the guill is using the height of footer changes in different screen sizes inspect the element and get your footer accurate height and minus that from the viewPort Height of the div and for a better practice add the below snippet at the top of your css file as it would force the browser to stick the the height and width you define and not increase or decrease when you apply paddings.

* {
  box-sizing: border-box;
}
Huzaifa Sajjad Malik
PRO
Huzaifa Sajjad Malik
Pro Student 10,823 Points

it happens when you work with the relevant units as you are using the padding of 2em to the footer it will add the padding by inheriting from the parent element and 310px is the height of the span element its width is 17px.

Navneet Singh
Navneet Singh
2,424 Points

no 17px is the height of the span element not the width. I have also tried with removing that 2em, and changing calc(100 - 17px) but still same issue, Scrol bar is still there, it's not going away.

Chadwick Savage
Chadwick Savage
11,414 Points

Min height is the least value height could be, it can be anything larger. If you want to condense it then change that value to max height. That won't let it expand past that point

Navneet Singh
Navneet Singh
2,424 Points

Guil is using 89px, i have checked in the console my footer size is 82px. no it can't be max height, min height would automatically make the the content full page if we us 100VH, but i am not getting the sticky footer still getting the scroll bar which should not be there.! :(

Huzaifa Sajjad Malik
Huzaifa Sajjad Malik
Pro Student 10,823 Points

did u tried including the code snippet which i have provided above it will actually tell the browser to only set the height what you have mention and dont add any extra height to the footer when you apply padding over it.

Navneet Singh
Navneet Singh
2,424 Points

yes i have done that also. I have updated my code above in this forum. Also if I change my valuse to calc(100vh - 310px) then it becomes all ok. Can you tell my why it's working with 310px and not with 82px.? 310px is the width of the span element in the footer section.!

https://www.dropbox.com/s/g2c1thsci8vuck8/span.jpg?dl=0

https://www.dropbox.com/s/qz62n2hfowk4q31/footer.jpg?dl=0

Jürgen Eberhart
PRO
Jürgen Eberhart
Pro Student 10,575 Points

I had the same issue and wondering around. It took me not long that this can not be a mistake inside of the code and I also noticed everytime I refreshed the browser it showed me correct for about less than a second and then it jumps down causing a scrollbar to appear.

I am using Google Chrome and had an addon running which i didn't really use but it was just there so right below my input for the url there was an additional bar. I closed this addon and since I don't use it deinstalled it. scrollbar disapear and everything is fine.

You might check if you have an addon too on top of your webpages right below the input for the webaddress.