CODEWITHSUNDEEP
cssheightcss-position
thelolcat
thelolcat

Reputation: 11615

How does height: 100% work on relative divs?

How is it so that height: 100% actually works on the .rel div? I know for sure that relative divs never taken percentage heights in account in the past...

.box{
    width: 200px;
    height: 200px;
}

.rel{
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
}

b{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
<div class="box">
  <div class="rel">
    <a> aa  </a>
    <b> bb </b>
  </div>
</div>

Upvotes: 1

Views: 92

Answers (1)

Scott
Scott

Reputation: 262

Relative divs can use percentage heights if their parents (box, in this case) are also given a height. Since you've given box a height of 200px, giving rel a percentage height actually means something. If its parent does not have a height defined, rel's height will be meaningless since its parent has no height. If you remove box's height, changing rel's height will do nothing, as seen here: http://jsfiddle.net/sxv9jLdz/

Upvotes: 1

Related Questions