CSS div innerhalb div unten erweitern

Question

div.div1 { 
 
    border: 1px solid red; 
 
    color: red; 
 
    width: 400px; 
 
    height: 100px; 
 
} 
 

 
div.div2 { 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
}

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

ich den obigen Code haben, die eine 400x100 div mit einem anderen in ihm gibt. Die zweite ist 10 Pixel neben der oberen, linken und rechten Seite der ersten, das ist in Ordnung, aber ich möchte es erweitern, so ist es 10 Pixel von unten ... Wie kann ich das beheben?

Answer 1

Ich denke, hier ist Ihre Lösung.

div.div1 { 
 
border: 1px solid red; 
 
color: red; 
 
width: 400px; 
 
height: 100px; 
 
padding: 10px; 
 
} 
 

 
div.div2 { 
 
border: 1px solid black; 
 
height: 100%; 
 
}

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

Answer 2

Haben Sie so etwas probiert? Kind <div> folgt nie seinem Elternteil in Höhen, wie es für die Breite tut. Also, wenn Sie möchten, dass etwas gleich weit von seinem Elternteil entfernt ist, haben Sie zwei Möglichkeiten, entweder den Code unten, oder die Höhe des Kindes zu fixieren, und dann, indem Sie javascript verwenden, vergrößern Sie es.

div.div1 { 
 
     border: 1px solid red; 
 
     color: red; 
 
     width: 400px; 
 
    } 
 
    
 
    div.div2 { 
 
     border: 1px solid black; 
 
     margin: 10px; 
 
    }

 

 

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