CSS cover with heights in pixels and percentages [closed]

StackOverflow https://stackoverflow.com/questions/15450658

  •  24-03-2022
  •  | 
  •  

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

Était-ce utile?

La solution

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

Autres conseils

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).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top