Erstellen eines Popup mit Responsive Styling

Question

Ich versuche, ein Popup mit 2 inneren divs mit responsive Sizing zu erstellen.

Ich dachte, ich könnte dies erreichen, indem Sie ihre width und height als Prozentsätze der Eltern Div setzen, aber es scheint nicht zu funktionieren. Wenn Sie die Größe Ihres Browserfensters ändern, fällt das leftArea-div in meiner jsfiddle aus dem Popup-div.

Wie kann ich das beheben?

jsfiddle

Answer 1

Verwenden box-sizing: border-box; Eigenschaft die Polsterung und Grenz innere Breite der Box einzustellen.

abfragen docs hier: box-sizing - CSS

body { 
 
    background-color: black; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    width: 80vw; 
 
    height: 10vh; 
 
    left: 0%; 
 
    right: 0%; 
 
    top: 50%; 
 
    display: block; 
 
    background-color: orange; 
 
    border: 2px solid white; 
 
    border-radius: 15px; 
 
} 
 

 
.leftArea { 
 
    position: relative; 
 
    float: left; 
 
    width: 85%; 
 
    height: 98%; 
 
    margin: 0px; 
 
    background-color: red; 
 
    border-radius: 14px 0px 0px 14px; 
 
    border: 0px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    box-sizing: border-box; /* Use this property to set the padding inner */ 
 
    display: inline-block; 
 
    text-align: left; 
 
    
 
} 
 

 
.rightArea { 
 
    position: relative; 
 
    float: right; 
 
    width: 12.25%; 
 
    height: 100%; 
 
    background-color: #123456; 
 
    margin: 0px; 
 
    display: inline-block; 
 
    border-radius: 0px 14px 14px 0px; 
 
    border: 0px; 
 
}

<div class="popup"> 
 
    <div class="leftArea"></div> 
 
    <div class="rightArea"></div> 
 
</div>