Question: So i have `.cont` that's centered in using position absolute and is height 80% of body. 

Inside it there are two divs. One is fixed height. And other one needs to expand to rest of parent, `.cont`.

So How do i make it expand to parent.

One other requirement is that content in both of these needs to be vertically and horizontally centered. 

```
body
   .cont
      .top
      .fillRest

```

Here is jsfiddle: <http://jsfiddle.net/24jocwu5/>

1. make .fillRest Expand to rest of .cont.
2. vertically and Horizontally center h1 headings in both divs.

Don't Use calc()

can use display table, flow, position, and other tricks. 

![enter image description here](https://i.stack.imgur.com/k68V6.png)

Answer: 
Here you go. Absolutely position the white container with a top-padding that equals the height of your fixed-height top div. Then give the top div a z-index so it goes over your white box:

Fiddle - <http://jsfiddle.net/24jocwu5/2/>

```
* {margin: 0; padding: 0;}

html, body {
    height: 100%;
    background-color: #3dd;
    color: #aaa;
    font-family: helvetica;
}
.cont {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background-color: #1af;
    width: 400px;
    margin: auto;
    height: 80%;
}
.top {
    height: 100px;
    background-color: pink;
    position: relative;
    z-index: 1;
}
.fillRest {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px;
    height: 100%;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1 {
    text-align: center;
    width: 200px;
    margin: auto;
    background-color: #eee;
}

```
Personally, I think the way you're going about this is all wrong. But maybe something like this would work.

<http://jsfiddle.net/24jocwu5/5/>

CSS selectors I changed:

```
.cont {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background-color: #1af;
    width: 400px;
    margin: 10% auto;
    overflow: hidden;
}

.top {
    height: 20%;
    background-color: rgba(255,255,255,.8);
}

.fillRest {
    background-color: white;
    position: relative;
    width: 100%;
    height: 80%;
}

h1 {
    text-align: center;
    width: 100%;
    margin: auto;
    background-color: #eee;
}

```