Wie setze ich div in voller Breite und voller Höhe innerhalb eines relativen und absoluten div

Question

Ich habe ein anderes Szenario. Es gibt drei verschiedene div ineinander. erste div hat position:relative und zweite div hat seine position:aboslute jetzt wie kann ich dritte div mit voller Breite und voller Höhe strecken?

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

Warum ein Kind der anderen sein muss .div3 brauchen? Wäre es nicht besser zu haben:

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

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

?

Wenn nicht, tut

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

Ihr Problem lösen?

Answer 2

Satzhöhe zum ersten relative div zweiten und anderen width 100% , height 100% Scheck mit diesem Snippet

.div1 { 
 
\t position:relative; 
 
\t height:300px; 
 
\t width:100%; 
 
} 
 
.div2 { 
 
\t position:absolute; 
 
\t height:100%; 
 
\t left:0; 
 
\t width:50%; 
 
\t background:#999; 
 
} 
 
.div3 { 
 
\t position:absolute; 
 
\t height:100%; 
 
\t width:50%; 
 
\t right:0; 
 
\t 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>

hat einen Blick auf dem oberen Lösung

Answer 4

HTML + CSS kann es einfach nicht. Es bricht die Regeln. Wenn Sie 3 benötigen, um größer als 2 oder 1 zu sein. Sie können dieses Ergebnis mit Javascript archivieren.

check the example

HTML

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

CSS

.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; 
} 

JQUERY JS

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

Answer 5

Ihre .div2 auf der Seite sein könnte überall und Sie würden immer noch wollen. div3 volle Breite und volle Höhe des Ansichtsfensters ... obere linke Ecke an der oberen linken Ecke Ihres Bildschirms/Ansichtsfensters Ich denke (ein Overlay)? Andernfalls ist ein großer Teil davon außerhalb der rechten Seite des Ansichtsfensters (und unter dem unteren) unsichtbar.

Sie können dann mit vh und vw Einheiten, die mit dem Ansichtsfenster bezüglich unabhängig von der Größe ihrer Eltern und position: fixed es in Bezug auf das Bildfenster zu bewegen, weil Sie nicht wissen, wo .div2 sind und mehr ist es irrelevant.Hier ist ein Ausschnitt:

.div1 { 
 
    position:relative; width:50px; height:50px; 
 
    margin: 50px 0 0 70px; 
 
    padding: 2rem; 
 
    background-color: tomato; 
 
} 
 

 
.div2 { 
 
    position: absolute; 
 
    width:50px; 
 
    height:50px; 
 
    background-color: yellow; 
 
} 
 

 
.div3 { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width:100vw; 
 
    height:100vh; 
 
    background-color: rgba(128, 128, 128, 0.7); 
 
} 
 
.div3:after { 
 
    content: 'right bottom'; 
 
    position: absolute; 
 
    bottom:0; right: 0; 
 
    padding: 1rem; 
 
    background-color: lightblue; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    In the page, somewhere 
 
     <div class="div3"> 
 
     <!-- I need div3 with full width and full height --> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum quaerat accusantium ex aliquid, quia, velit saepe quisquam iure! Nobis quam asperiores saepe, in voluptatem et, harum minima a necessitatibus. 
 
     </div> 
 
    </div> 
 
</div>