CSS cover with heights in pixels and percentages [closed]

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

  •  24-03-2022
  •  | 
  •  

سؤال

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

هل كانت مفيدة؟

المحلول

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

نصائح أخرى

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top