CSS cover with heights in pixels and percentages

Question

I'd like to have a page with a first div with a 100% height (no problem for this), and two divs inside that cover the whole height of the parent div. If the 2 divs had a height in percentage, there will be no problem but the fact is that I need to have one div in pixels (specific height) and one other in percentage (cover the rest).

Can I do it in CSS or should I use javascript? (I like to use only CSS when possible)

Html structure :

<html style="height: 100%;">
<head></head>
<body style="height: 100%;">
    <div style="height: 100%;">
        <div style="height: 40px;"></div>
        <div style="height: ???"></div>
    </div>
</body>
</html>

Thanks for any answer.

Ecorce

Why don't you give height in percentage for all div's its easy to manage. — Praveen Mitta, Mar 16 '13 at 14:55

score 0 · Answer 1 · answered Mar 16 '13 at 14:57

0

Well first of all, if you want them appear from top to bottom, you should use float property, and for second height you can use calc(100% - 40px) here is browser support for this property (http://caniuse.com/#feat=calc).

answered Mar 16 '13 at 14:57

kirugan

2,514
2
22
41

score 0 · Accepted Answer · answered Mar 16 '13 at 15:10

For filling available space in parent div just use this

.parent
{
  position: relative;
}

.child
{
  position: absolute;
  bottom: 0;    
  top: 40px;   /* can set accordingly"*/   
}

So try this code

 <div class="parent">
        <div class="fixedChild"></div>
        <div class="dynamicChild">ss</div>
</div>

CSS :

body,html
{
    height:100%;
}
.parent
{
    height:100%;
    min-height:100%;
    background-color:Black;
    position: relative;
}
.fixedChild
{
    height:40px;
    background-color:Green;
}
.dynamicChild
{
    background-color:Red;
    position: absolute;
    top: 40px;
    bottom: 0;
    width:100%;
}

here is JS Fiddle demo

CSS cover with heights in pixels and percentages

2 Answers2