d_z90 d_z90 - 4 months ago 75
CSS Question

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

I am building an app in

Ionic
where I am trying to locate four
row
elements and a
button
inside a
div
. The
div
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

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)

Comments