Максимизировать Div без перемещения в DOM

Question

Я хочу максимизировать div для всей ширины и высоты окна (или другого родительского div), не перемещая элемент в DOM. Возможно ли это только с помощью CSS?

<div id="parent1" class="fullwidth"> 
    <div id="parent2" class="notfullwidth"> 
     <div style="position:absolute">mycontent</div><!-- make this full width of parent1/overlay parent1 --> 
    </div> 
</div> 

Answer 1

Да, это может быть достигнуто путем установки #parent1relative лы и расширение absolute LY позиционируется грандиозную ребенка, установив его top, right, bottomleft и свойства 0.

#parent1 { 
 
    position: relative; 
 
    background-color: gold; 
 
} 
 

 
#parent2 { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    min-height: 100px; 
 
    border: 1px solid gray; 
 
} 
 

 
.grand-child { 
 
    position: absolute; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    background-color: rgba(255, 30, 0, .5); 
 
}

<div id="parent1" class="fullwidth"> 
 
    <div id="parent2" class="notfullwidth"> 
 
     <div class="grand-child">mycontent</div><!-- make this full width of parent1/overlay parent1 --> 
 
    </div> 
 
</div>

Answer 2

Если родитель не имеет относительное положение, то ребенок может быть расширить до полной ширины/высоты по отношению к окну.

#mycontent { 
background-color: green; 
position: absolute; 
width: 100%; 
top: 0; 
left: 0; 
height: 100%; 
} 

если Parent1 имеет относительное положение, то ребенок будет расширяться родительской максимальной шириной & максимальной высоты.

#parent1 { 
position: relative; 
width: 300px; 
height: 300px; 
} 
#mycontent { 
background-color: green; 
position: absolute; 
width: 100%; 
top: 0; 
left: 0; 
height: 100%; 
}