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

glenn romaniuk
glenn romaniuk
33,201 Points
Posted by glenn romaniuk
glenn romaniuk
33,201 Points

how to make a div fill the available height

I've set the html and body height to 100%. I have a div with 4 sub-divs and want each div to equally fill the entire height of the available space. In this example each would use 25% of the available height. My second question is it possible to set up the div in html or css so that it just divides the height equally based on the available space without having to calculate the percentages and assign them?

<div> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> </div>

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

There are a few different ways to get the height to equal 100% of the available height of the containing element. One way is to use absolute positioning, and specify top, right, bottom, and left to equal 0. Another way is to set height equal to 100vh.

In regard to your second question, you could do that with flex-box, or you could use javascript.

meowls
meowls
6,840 Points
meowls
meowls
6,840 Points

To answer the first question, if you know you always want 100% of the viewport height to be taken up by 4 divs of equal height, the height of each inner div could be set to 25vh. http://codepen.io/anon/pen/bVZKzq

The downside would be that if the content of the inner divs ever exceeds 25% of the viewport height, it will spill out of its container. To offset that, you could set the min-height to 25vh, at which point it would expand to fit its content it exceeded 25% of the height.