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!

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

CSS

Clinton Hopgood
Clinton Hopgood
7,825 Points
Posted by Clinton Hopgood
Clinton Hopgood
7,825 Points

How to use full window height and more as size increases.

I want the content to fill the entire window and expand beyond in height as required.

The html:

<html>
  <body>
    <div style="background: yellow;"></div>
  </body>
</html>

This CSS is what I have, it fills the page but doesn't expand vertically:

html, body, div {
  height: 100%
}

I've tried using min-height but it can only be used on child elements or it doesn't work because the parent isn't defined absolute.

2 Answers

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points 
html {
    height: 100%;
}

body {
    height: 100%;
}

div {
    min-height: 100%;
}

Works to do what I needed. However some of my other code was complicating matters so I did this on a new page for testing purposes.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points
Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

Hi, Clinton. I'm not sure why it's not working for you like that, since it should, as seen in this pen. You usually want to keep your body and html declarations separate, though.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

This does work to fill the page, however if the contents of the div expand beyond the height of the browser window then they overflow outside of the body. I need the body to adapt.

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points
Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

I'm not quite sure what you mean. The body should continue to expand if content takes up more height than the viewport allows. Can you post an image or something to explain what you mean in more detail?

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

The problem lies in the fact that the children of the body are specified as % heights. If body is set to min-height: 100% the children will not get a height as a min-height on body isn't absolute and If I set html and body to 100% then this remains static and there will be no overflow.