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
sarahmoore4
6,980 PointsFooter not 100% sticking to bottom - little bit of a bottom gap
The footer isn't totally sticking to the bottom it looks like there's still about 5px of space between the end of the page and the bottom of my footer. Just wanted to double-check and make sure I'm doing this concept correctly - here's my code - I didn't link normalize.css to it so I don't know if that's what could be creating the issue.
<! DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <style> * { box-sizing: border-box; } .wrap{ min-height: calc(100vh - 129.875px); } header,footer { background-color: lightblue; padding: 10px; margin: 0 auto; } h1 { float: left; } ul,li{ display: inline-block; padding: 10px; } li { float: right; }
.main {
width: 70%;
max-width: 1000px;
margin: 0 auto;
color: black;
background-color: lightpink;
}
</style> </head> <body> <div class="wrap"> <header> <h1>This is my header</h1> <ul> <li>Menu</li> <li>Home</li> <li>Other Stuff</li> <li>More Other Stuff</li> </ul> </header> <div class="main"> <p> Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space. <br> Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space. <br> Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space. <br> Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space. <br> Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space.Lots of words to take up lots of space. <br> </p> </div> </div> <footer> <h1>This is my footer</h1> <ul> <li>Menu</li> <li>Home</li> <li>Other stuff</li> <li>More other Stuff</li> </ul> </footer> </body> </html>
2 Answers
Shaun Kelly
35,560 PointsHi Sarah,
As you predicted, the issue is more than likely due to normalize css not being initiated. Normalize css will initially reset all styles and remove any margin/padding. You could alternatively add something like this to the start of your stylesheet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Hope this helps, Shaun
sarahmoore4
6,980 Pointsthanks so much I appreciate your insight!
Emerson French
Front End Web Development Techdegree Student 4,125 PointsEmerson French
Front End Web Development Techdegree Student 4,125 PointsI added your code to mine, and turns out that you are right! it works!. Here is what I did for the webpage.
/* base element styles */
/* Media queries */
.wrap { min-height: calc (100vh - 89px); } Hope this helps. Thanks Shaun. Emerson.