how to make a div fill the available space

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?

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
Making each of the child div elements 25% of the total height is easy. You need to make sure the parent div is using all of the screen height. Set the height property to 100vh instead of 100%;

A jsfiddle example is here:

If you want to auto-calculate the height of each child div based on how many there are you'll need a little Javascript to help you. Here I went with a pure Javascript solution (no jQuery or other library required) since the Javascript is relatively simple.

(Colors were just added for visual clarity)
glenn_rAuthor Commented:
Great example. One last thing. I'm trying to center the text in the div. I'm using the following CSS. I can't specify the line-height to be equal to 100% of the available space. How can I do this?

  text-align: center;
  vertical-align: middle;
  line-height: 100% ;
Russ SuterSenior Software DeveloperCommented:
Well, yes. Depending on what browser support you need the easiest way is to use Flexbox.

For details on which browsers support Flexbox look here:

If you can't use Flexbox then you could try this approach

The issue with this is that you're using absolute positioning which takes the div out of flow control. Side effects may include nausea, dizziness, itchy eyeballs, headaches, and excessive yelling at your screen.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
If you are not too concerned about backward compatibility there is the flex model.
<style type="text/css">
* {
  margin: 0;
  box-sizing: border-box;
body, html {
  height: 100%;
.item {
  height: 25%;
  width: 100%;
  background: white;
  color: blue;
  justify-content: center;
  display: flex;
  align-items: center;
.item:nth-child(2n) {
  background: blue;
  color: white;

Open in new window

<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>

Open in new window

Julian HansenCommented:
Ignore last post please - did not refresh before posting so did not see Russ Suter's post which covers everything mine did.
For vertical center you can add:

  text-align: center;
  vertical-align: middle;

Open in new window

I go with Julian, but flex box model needs modern browser to work with...

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.