How to span two rows to fill up the whole ion-content?

I want to have two rows in the whole page and scroll is disabled.
First row should span 60% of the whole page.
Second row should span 40% of the whole page.

And under first row, there will be two list-items where each list-item occupy 50% of the row.
And under second row, there will be 4 list-items where each list-item occupy 25% of the row.

How can i achieve this? The code-skeleton is show below.

<ion-view title="" hide-nav-bar="true">
    <div class="bar bar-header">
        <h1 class="title sign-up-view-header-title-text">Test</h1>
    </div>
    <ion-content class="has-header" scroll="false">
        <div class="whole-page-div">
            <!---- Top Element has two list items ----!>
            <div padding="false" class="top-div">
                <div class="design-div item"><div class="outer-circle"></div></div>
                <div class="global-sf-font item item-place-holder"> Please help yourself </div>
             </div>

              <! ------------- Bottom div has two internal divs. One with 3 list items, another with just a button -----------!>

             <div class="bottom-div">
                 <div class="bottom-div-top">
                    <! ------------- Bottom div top element has 3 list elements -----------!>
                    <div class="" padding="false">
                        <a class="item">Bottom Div List Item 1</a>
                        <a class="item">Bottom Div List Item 2</a>
                        <a class="item">Bottom Div List Item 3</a>
                    </div>
                   <! ------------- Bottom div bottom element has only one button -----------!>
                    <div class="button-div-bottom">
                        <button class="" >button</button>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>