d_z90 d_z90 - 1 year ago 206
CSS Question

Ionic - Multiple elements fill 100% height of parent <div>

I am building an app in

where I am trying to locate four
elements and a
inside a
. The
has an
height: 100%
that covers the whole screen, and the content has to stretch to its full-height.

I have tried the following solution, but apparently it is not working:

ion-content {
position: relative;
height: auto;
width: 100%;

.boxes-container {
position: absolute;
height: 100%;
width: 100%;

This is the complete code. Do you have an idea of what is a possible way to solve it?

Thanks in advance for your replies!

Answer Source

You can use a combination of the calc function and viewport units to achieve this layout.

height: 100vh will give an element a height equal to that of the viewport.

You have a header element that is 44px in height. You can deduct this from 100vh using the calc function:

.boxes-container {
  height: calc(100vh - 44px);

This will give your element a height equal to that of the viewport minus the height of the header element.

You then need to give your five rows a height of 20% so that they occupy all of the available vertical space in the container.

.row {
  height: 20%;

Updated live demo

calc() is available in all major browsers and IE>8 (caniuse.com)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download