CODEWITHSUNDEEP
htmlcssionic-framework
d_z90
d_z90

Reputation: 1263

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!

Upvotes: 3

Views: 8352

Answers (1)

Turnip
Turnip

Reputation: 36632

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. Each row has a vertical margin. You can deduct these from 100vh using the calc function:

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

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 four rows and the button a height of 20% so that they occupy all of the available vertical space in the container.

.row {
  ...
  height: 20%;
}

.button {
  height: 20%;
}

Updated live demo

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

An alternative would be to give both .scroll and .boxes-container a height of 100% and .row a height of 20%:

.scroll {
  height: 100%;
}

.boxes-container {
  height: 100%;
}

.row {
  ...
  height: 20%;
}

Updated live demo

Upvotes: 6

Related Questions