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