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

CSS

Posted by Dennis Castillo
Dennis Castillo
16,018 Points

responsive css for height.

Hello,

We know what to do if we wan't to be our site to be responsive dealing with "width" set this to "auto" or "100%". But how about height? If we want to create a simple webpage with only plain page without scrolls up and down, left to right but it is responsive according to the size of any browser or mobile.

I tried like "height: 100%;" but the result was not I expected it is not responding according to the size of my browser, I tried "padding into the div but that is only responding between the object upper and lower.

what should I do? to able the height responsive... Thanks....

Kristoffer Lund
Kristoffer Lund
11,133 Points

If you use "height: 100vh", the div will be the size of your browser, but its not responsive.

1 Answer

Craig Watson
Craig Watson
27,930 Points

Hi Dennis,

You have to make the root most elements 100% to, so "html" and "body" need to be set to height 100%.

Here is a pen I have set up to demonstrate this

If you comment out the rule for .full you will see the full size body behind it.

If you then comment out .full and body you will see the full size html behind that :)

The Bootstrap Framework also has this which you may find useful.

Hope this helps :)

Craig

Dennis Castillo
Dennis Castillo
16,018 Points

Thank you very much, I understand now <thumbsUp>....