Width and Height 100percent is not working

Question

Lets say i have two divs

<div class="1">
    <div class="2">
    </div>
</div>

Div 1 have this style

width: calc(100% - 22rem);
min-height: calc(100% - 7.75rem);

How can i set div 2 to same size as div1? Because width:100% and height:100% wont work

use flex box or position absolute – stackoverflow May 06 '19 at 09:05 — stackoverflow, May 06 '19 at 09:05
use `min-width` and `min-height` it will works – Udhay Titus May 06 '19 at 09:09 — Udhay Titus, May 06 '19 at 09:09
Thanks display flex with min height and min width work :) – Sheldon May 06 '19 at 09:14 — Sheldon, May 06 '19 at 09:14

score 1 · Accepted Answer · edited May 06 '19 at 09:18

position: absolute;

works fine as mentioned by Barbu Barbu

Here's a fiddle for visualization

https://jsfiddle.net/rvzqsgc1/3/

body {
  background-color: black;
}

.div1 {
  position: absolute;
  width: calc(100% - 22rem);
  min-height: calc(100% - 7.75rem);
  background-color: white;
}

.div2 {
  width: 100%;
  background-color: green;
  height: 100%;
  position: absolute;
}

<div class="div1">
  <div class="div2">

  </div>
</div>

score 1 · Answer 2 · answered May 06 '19 at 09:34

Try like this, It will work for you.

  body { 
      background: black
    }
    
    .one {
      position: absolute;
      background-color: #FFF;
      width: calc(100% - 22rem);
      min-height: calc(100% - 7.75rem);
    }
    .two {
      position: absolute;
      width: 100%;
      background-color: orange;
      height: 100%;
    }

    <div class="one">
        <div class="two">
        </div>
    </div>

Width and Height 100percent is not working

2 Answers2