content with height 100%

I have a view with two cols, I want the first col with 80% of the window height and the second with 20%.

I've tried this:

<ion-view title="Events" >
    <ion-content >
        <div style="height: 80%;">
            Image here!
        </div>
        <div style="height: 20%;">
            Text here!
        </div>
    </ion-content>
</ion-view>

Is not working because this will only work if I had a container with a height in px but I can't do that because the height will change according to each device.

Create screens with no scroll with the content fitting the screen height is a common approach and I think ionic should have a documented solution for this.

You can use viewport units:

<ion-view title="Events" >
    <ion-content >
        <div style="height: 80vh;">
            Image here!
        </div>
        <div style="height: 20vh;">
            Text here!
        </div>
    </ion-content>
</ion-view>

80vh is 80% of the height of the viewport. The same goes for 20vh. My answer is also assuming you have correctly set some other CSS "fixes" to make both divs stack vertically without spaces between them, etc.