How do I make a div full height of browser when it is positioned above a fixed div?

Question

I have 3 div's. The first is 100% width and 100px high. The second is 100% wide but I want to make it the height of the browser. The 3rd is 100% wide and 100px high but this 3rd div is fixed at the bottom of the screen.

Here is my attempt that doesn't make the middle div fill the space between the top and bottom div's

.top, .bottom{
    background-color: grey;
    width: 100%;
    height: 100px;
}

.bottom{
    position: fixed;
    bottom: 0;
    left: 0;
}

.middle{
    background-color: white;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

Here is a JsFiddle of what I have attempted JsFiddle

How do I get the middle div to expand to fill the space between the upper and lower div's?

Answer 1

There are many ways to do that.

A simple one (though you must check for browser compatibility) is to use calc() . Then you don't need to use a fixed position on the bottom div:

Updated JsFiddle

html, body {
    margin: 0;
    height: 100%;
}

.top, .bottom{
    background-color: grey;
    width: 100%;
    height: 100px;
}

.middle{
    background-color: white;
    width: 100%;
    height: calc(100% - 200px);
    outline: 1px solid red;
}

Answer 2

If this is literally your only requirement, you can probably get away with

.middle {
    height: calc(100vh - 200px);
}

But if you wanna take it all a step further it might be wise to take a look at flexbox. This page has some nice information http://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

Answer 3

First you need to fix the height of the whole page by setting html and body to 100% height. Then you need to add a bottom-margin to your .middle div to take into account the height of the bottom one:

 html, body { height: 100%; } .top, .bottom { background-color: grey; width: 100%; height: 100px; } .bottom { position: fixed; bottom: 0; left: 0; } .middle { background-color: white; width: 100%; height: 100%; border: 1px solid red; margin-bottom: 100px; } 

 <div class="top"></div> <div class="middle">some text</div> <div class="bottom"></div> 

Answer 4

Try using view-port height.

height: 100vh;

Failing that I would consider using flex: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

It's designed to do what you are trying to do.

Answer 5

If you can use flex and vh this will work.

body {
    display: flex;
    flex-direction:column;
}
.top, .bottom{
    background-color: grey;
    flex: 1 1 100px;
}
.middle{
    background-color: white;
    border: 1px solid red;
    flex: 1 1 100vh;
}