How do i get last div to expand parent's height? - html

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/
make .fillRest Expand to rest of .cont.
vertically and Horizontally center h1 headings in both divs.
Don't Use calc()
can use display table, flow, position, and other tricks.

Answer 1

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;
}

Answer 2

You can use flexbox for this
.cont {
display: flex;
flex-direction: column;
}
.cont > div {
display: flex;
}
.fillRest {
flex: 1;
}
Working Fiddle

Answer 3

This is what you want?
Only position fixed and right and left 0
http://jsfiddle.net/pabliiitoo/24jocwu5/1/
.fillRest {
position: fixed;
left: 0;
right: 0;
background-color: red;
min-height: 80px;
}

Answer 4

In order to expand the .fillRest to the rest of its parent .cont, you need to set it's height to a percentage. I estimate about 20~30% is what you want in order to maintain a similar look to the image you've provided here.
To test it, grab a very large paragraph full of letters and anything you want and put it where the 'Content' text is, that way you will be able to see it expanding in a responsive way. Another suggestion I will give you is to make your width percentages as well, so that they expand according to the width of the screen responsively.
Let me know if this helped you, otherwise I can take another look :)
CSS
.cont {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}

Answer 5

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;
}

Answer 6

This is Summary Of Ways.. First two ways posted here--
FlexBox Method 100% WORKS
Padding Method 80% WORKS. Useful But not exactly.
Css Table Cell and Table Rows 100% WORKS. From Me.
Using Calcs Simplest One. 100% WORKS. From me.
Css Table Cell: http://jsfiddle.net/24jocwu5/7/
.cont is The Table. top & fillRest are table rows, and there is cell which can have vertical align middle.
Calc Method: http://jsfiddle.net/24jocwu5/9/
Works but doesn't scale well if content increases, so need to use another div which can contain the content. Like so http://jsfiddle.net/24jocwu5/10/
Default code:
* {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%;
}