Ionic grid

ionic-v1
1

Hi guys,

I’m trying to push a div towards the bottom of the screen (but would prefer not to use the footer directive). How can I manipulate the ionic grid to push a div down?

For example, I want to divide the screen into three rows, first row 50% of the screen, second 25%, third 25%.

I appreciate any help.

Thanks,
Paul

2

maybe you’ve already tried it, but have you used min-height: 50%; ?

3

The grid is only design to space columns horizontally, not to space rows vertically. It does allow you to align content inside of a column vertically, but not the rows themselves.

You will need to add custom CSS to your rows to give them the heights you want. Something like this.

.row-50 {
  min-height: 50%;
  max-height: 50%;
}
.row-25 {
  min-height: 25%;
  max-height: 25%;
}

<div class="row row-50">I take up 50% of the height</div>
<div class="row row-25">I take up 25%</div>
<div class="row row-25">I take up the last 25%</div>