Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Navneet Singh
2,424 Pointsmin-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> ©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
Courses Plus Student 10,823 PointsWhat 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
Courses Plus Student 10,823 Pointsit 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
2,424 Pointsno 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
11,919 PointsMin 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
2,424 PointsGuil 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
Courses Plus Student 10,823 Pointsdid 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
2,424 Pointsyes 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.!
Jürgen Eberhart
Courses Plus Student 10,575 PointsI 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.