宽度和高度100％不起作用

Question

让我说我有两个divs

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

Div 1具有这种风格

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

如何将div 2设置为与div1相同的大小？ 因为width:100%和height:100%无法正常工作

Answer 1

position: absolute;

工作正常，如Barbu Barbu

所述

这里是可视化的小提琴

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>

Answer 2

尝试这样，它将为您服务。

  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>