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?

<div>
   <div>div1</div>
   <div>div2</div>
   <div>div3</div>
   <div>div4</div>
</div>
glenn_rAsked:
Who is Participating?
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 SuterCommented:
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:
http://jsfiddle.net/ohu8x0ar/

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.
http://jsfiddle.net/ohu8x0ar/2/

(Colors were just added for visual clarity)
0
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% ;
0
Russ SuterCommented:
Well, yes. Depending on what browser support you need the easiest way is to use Flexbox.
http://jsfiddle.net/ohu8x0ar/5/

For details on which browsers support Flexbox look here: http://caniuse.com/#feat=flexbox

If you can't use Flexbox then you could try this approach
http://jsfiddle.net/ohu8x0ar/6/

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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
If you are not too concerned about backward compatibility there is the flex model.
CSS
<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;
}
</style>

Open in new window

HTML
<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

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

  display:inline-block;
  text-align: center;
  vertical-align: middle;

Open in new window


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

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
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.