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
Jesus Mendoza
23,289 PointsHaving troubles setting body height to 100%
Hey! I'm having a small problem when setting the body height to 100% so I can create a landing page of the height: 100%
This is my css:
html, body {
height: 100%;
min-height: 100%;
}
#home {
height: 100%;
}
It does set the height of the home to 100% but it acts like if the rest of the page is out of the 100% height of the body, if I set overflow: hidden; then it hiddes the rest of the page and only shows the home section.
6 Answers
Ted Sumner
Courses Plus Student 17,967 PointsThis is my favorite footer solution. It places the footer on the bottom of the browser window but does not make it sticky. The is the scss for a project that I am working on. I did not include the margin for the body, but that just has to be the same as the footer height.
footer {
position: absolute;
left: 0;
bottom: 0;
height: $footerHeight;
width: 100%;
}
I left of some normal styling stuff for my site. The $footerHeight is a Sass variable that is also located at the body margin to ensure they are always the same.
Jesus Mendoza
23,289 PointsI'm trying to make like a landing page with 100% height even if it doesnt require that much space and keep adding content below it.
Something like this http://www.uxpin.com/ https://www.spotify.com
I've done it before but this time I can't get it right, I've checked my code and it's the same I'm using.
Ted Sumner
Courses Plus Student 17,967 PointsGive my solution a try. It should work well for you.
David Tonge
Courses Plus Student 45,640 Pointshtml{
height: 100%;
}
body{
min-height: 100%;
}
Nurul Ahsan
2,039 PointsHello Jesus, Is body height necessary for the work ? I dont know but i think you can set the width of the body by the % and height will be the auto.
Sidney Casagrande
7,035 PointsIt's hard to tell without the markup handy. Is there another selector between body and #home? If so you might need to add the 100% height to the selectors in between, or you might be able to use the key-word initial instead? What type of selector is used for #home (div or something different)? Each type of selector has a different type of default display, height, width and positioning property.
Jesus Mendoza
23,289 PointsThere isnt any other selector between body and #home and it is a div container
Sidney Casagrande
7,035 PointsI played around a bit and came to this solution in the fiddle: https://jsfiddle.net/sidbighouse/o75790wq/
I think your main problem is that you have min-height and height. I don't think it makes a lot of sense to have both in the same selector. Do you really need a min-height? in that case you might have to purely focus on the min-height property across the board instead of height.
Jesus Mendoza
23,289 PointsDo you mind taking a look at my code?
Sidney Casagrande
7,035 PointsSure, I can give it a shot.
As a hint apply different background colors to each element like I did, that way you can see which element is of which size. You can then adjust all properties like height, margins, display, etc. And you should get to a solution.
Jesus Mendoza
23,289 PointsCheck it out http://codepen.io/Jesusz0r/pen/MwGoPv
If you take a look at it you can see the home div has 100% height, but if you add overflow hidden to the body you can see that the body has a height of 100% and hides the rest of the contect so I can't apply effects like smooth scroll to my page
Nurul Ahsan
2,039 PointsJesus Mendoza, Not like that, I think no need to write height:100%. http://codepen.io/nurulahsan/pen/YXLxqz
Ted Sumner
Courses Plus Student 17,967 PointsSpotify uses flexbox and the vh unit for height. vh is viewport height and I think only applies to flex. See this discussion for more detail. This is a great flexbox reference.
The codepen appears to work to me.
Jesus Mendoza
23,289 PointsIt does work but the rest of the content acts like if it's outside of the body height, so I can't add effects like smooth scroll and stuff. Try adding overflow: hidden; to the body and you'll see all the content but the home dissapear.
Btw I already knew about vh but it's only supported on modern web browsers, thanks for the reference tho
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsAre you trying to make it so the page takes up the entire browser window even if it does not require that much space for the content?