CODEWITHSUNDEEP
htmlcssheight
DreamTeK
DreamTeK

Reputation: 34197

CSS: How to fill a dynamic container that contains fixed sized elements?

Using CSS I am trying to get a div to fill a dynamicly sized container that also contains a fixed height div.

How can the grey div (See snippet) be made to fill the remaining available space only without overflowing?

FIDDLE

html,body{height:100%;}
.Wrap{
    height:100%;
    width:50%;
}
.H40,.H60{
    display:block;
    padding:15px;
    box-sizing:border-box;
}
.H40{        
    height:40%;
    background:#b00;
}
.H60{
    height:60%;
    background:#58c;
}
.Top{
    background:#8d5;
    height:40px;
}
.Fill{
    height:100%;
    width:100%;
    background:#DDD;
}
<div class="Wrap">
    <div class="H40">
        <div class="Top">TOP</div>
        <div class="Fill">Fill this space</div>
    </div>
    <div class="H60">
        <div class="Top">TOP</div>
        <div class="Fill">Fill this space</div>
    </div>
</div>

Upvotes: 0

Views: 1270

Answers (3)

BobyCode
BobyCode

Reputation: 58

Add height:calc(100% - 20px); in .Fill in your CSS.

Upvotes: 0

user3171894
user3171894

Reputation:

try this

use calc for that

.Fill{
    height:calc(100% - 40px);
    width:100%;
    background:#DDD;
}

http://jsfiddle.net/pgys24ct/3/

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115046

I think display:table, display:table-row and display:table-cell will solve this.

JSfiddle Demo

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{height:100%;}
.Wrap{
    height:100%;
    width:50%;
}
.H40,.H60{
    display: table;
    padding:15px;
    height:100%;
    width:100%;

}
.H40{ 
    height:40%;
    background:#b00;
}
.H60{
    height:60%;
    background:#58c;
}
.Top{
    display: table-row;
    background:#8d5;
    height:40px;
}

.fill {
    display: table-cell;
    background: #ccc;
    height:100%;
}
<div class="Wrap">
    <div class="H40">
        <div class="Top">TOP</div>
        <div class="fill"></div>
    </div>
    <div class="H60">
        <div class="Top">TOP</div>
        <div class="fill"></div>
    </div>
</div>

Upvotes: 2

Related Questions