CSS cover with heights in pixels and percentages [closed]

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

  •  24-03-2022
  •  | 
  •  

Domanda

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

È stato utile?

Soluzione

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

Altri suggerimenti

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top