如何在相对和绝对div中设置全宽和全高div

Question

我有一个不同的场景。里面有三个不同的div。第一个div有了position:relative，第二个div有了它的position:aboslute，现在我怎样才能用全宽和全高扩展第三个div呢？

div1：positon:relative; width:50px; height:50px;

div2：postion:absolute; width:50px; height:50px;

div3：postion:absolute; width:100%; height:100%; // It's not working

<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

​

​

Answer 1

为什么.div3需要成为其他人的孩子？不是有更好的：

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

<div class="div3"></div>

若否，会否

.div3 {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

解决了你的问题吗？

Answer 2

将height设置为first relative div second，并使用此代码片段检查另一个width 100% , height 100%

​

.div1 {
	position:relative;
	height:300px;
	width:100%;
}
.div2 {
	position:absolute;
	height:100%;
	left:0;
	width:50%;
	background:#999;
}
.div3 {
	position:absolute;
	height:100%;
	width:50%;
	right:0;
	background:#CCC;
}

<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

​

Answer 3

​

body, html{
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
  }

.div1{
 height:50px;
  width:50px;
  position:relative;
  background:green;
}

.div2{
  height:50px;
  width:50px;
  position:absolute;
  background:gold;
}

.div3{
  height:100vh;
  width:100vw;
  position:absolute;
  background:gray;
}

<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

​

看看上面的解决方案