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

我有一个不同的场景。彼此内部有三个不同的div。第一个div有

position:relative

，第二个div有

position:aboslute

现在如何拉伸第三个div的全宽全高

div1:

位置：相对；宽度：50px；高度：50px

第2部分：
职位：绝对职位；宽度：50px；高度：50px

第3部分：
职位：绝对职位；宽度：100%；高度：100%；//它不工作了

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



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

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

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

解决您的问题？
将高度设置为第一个
相对
第二个，另一个
宽度100%，高度100%
检查此代码段


.div1{
位置：相对位置；
高度：300px；
宽度：100%；
}
.第2分部{
位置：绝对位置；
身高：100%；
左：0；
宽度：50%；
背景：#999；
}
.第3分部{
位置：绝对位置；
身高：100%；
宽度：50%；
右：0；
背景：#CCC；
}


body，html{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
.1分部{
高度：50px；
宽度：50px；
位置：相对位置；
背景：绿色；
}
.第2分部{
高度：50px；
宽度：50px；
位置：绝对位置；
背景：金；
}
.第3分部{
高度：100vh；
宽度：100vw；
位置：绝对位置；
背景：灰色；
}

HTML+CSS就是做不到。它违反了规则。如果需要3大于2或1。
您可以使用javascript归档该结果


HTML

jQueryJS

$('.div3').detach().insertAfter('.div1');

您的.div2可以位于页面中的任何位置，但您仍然需要.div3视口的全宽和全高。。。左上角位于屏幕/视口的左上角（我猜是覆盖图）？否则，其中很大一部分将在视口右侧（以及底部下方）之外不可见

然后，您可以使用相对于视口的vh和vw单位（无论其父对象的大小）和
position:fixed相对于视口移动它，因为您不知道.div2在哪里，而且它与视口无关。下面是一个片段：


.div1{
位置：相对；宽度：50px；高度：50px；
利润率：50像素0.70像素；
填充：2rem；
背景色：番茄；
}
.第2分部{
位置：绝对位置；
宽度：50px；
高度：50px；
背景颜色：黄色；
}
.第3分部{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景色：rgba（128、128、128、0.7）；
}
.第三组：之后{
内容：“右下”；
位置：绝对位置；
底部：0；右侧：0；
填充：1rem；
背景颜色：浅蓝色；
}

在页面的某个地方
Lorem ipsum dolor sit amet，奉献精英。你可以选择从流动资金中获得现金，但你必须这样做！在沃卢帕坦等地，没有人能满足需要。
如果div1和div2具有较小的宽度和高度，它将如何工作？绝对定位元素相对于最近的相对定位父元素进行定位。将
.div3
从另外两个文件中删除，使最接近的相对父文件成为文档正文。这将是OP的适当解决方案。如果
div1
和
div2
具有较小的宽度和高度，它将如何工作？位置：absolute div现在可以对父文件进行全宽和全高检查，如果
div1
和
div2
具有较小的宽度和高度，它将如何工作？实际上，您没有提到第一个和第二个div的宽度和高度。但没有问题，我已根据您的代码进行了一些更改！查看一下
position:fixed
将解决如果您不希望第3个div与页面一起滚动的问题，但是如果您确实希望这样做，那么div 1和div 2的左/顶部位置是否已知。。。如果没有，你将需要一个脚本，如果是的，让我知道这是如何知道的，我发布了一个，如果没有一个给定的脚本已经显示了如何将div 1居中，包括垂直和水平，对于div 2也是如此，这也算是已知其位置。
<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

.div1 {
  position: relative;
  width: 350px;
  height: 350px;
  background-color: blue;
}

.div2 {
  position: absolute;
  width: 250px;
  height: 250px;
  background-color: red;
  left: 50px;
  top: 50px;
}

.div3 {
  position: absolute;
  background-color: green;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

$('.div3').detach().insertAfter('.div1');