CODEWITHSUNDEEP
htmlcss
M1X
M1X

Reputation: 5354

How to set top div height to the remaining height css

I have a div positioned fixed at the bottom of the screen with fixed height of 200px; How can I set the div height on top of it to the remaining height?

<div id="container"></div>
<div id="wrap"></div>

body {
    padding: 0;
    margin: 0;
    color: #fff;
    font: 18px "bonvenocf";
}

#wrap {
    position: fixed;
    bottom: 0;
    text-align:center;  
    background: #1b1b1b;
    width: 100%;
    height:200px;
}

#container {
    width: 100%;
    background: #0084ff;
    min-height:320px;
}

This is my fiddle: http://jsfiddle.net/8kLo0v9q/6/

Upvotes: 0

Views: 1395

Answers (2)

Andy Holmes
Andy Holmes

Reputation: 8077

All you need to do is add the following codes:

body {
    height: 100%;
}

#container {
    height: 100%;
}

This will ensure the top div will take up the remaining space above the fixed bar

Upvotes: 0

PaulDapolito
PaulDapolito

Reputation: 824

Alter your container div to have height: 100%:

#container {
    width: 100%;
    height: 100%;
    background: #0084ff;
    min-height:320px;
}

Upvotes: 1

Related Questions