レスポンシブなスタイルでポップアップを作成する

Question

レスポンシブルサイジングを使用して2つの内部divでポップアップを作成しようとしています。

私はwidthとheightを親divのパーセンテージとして設定することでこれを達成できると思っていましたが、うまくいかないようです。ブラウザウィンドウのサイズを変更すると、jsfiddleのleftArea divがポップアップdivから外れます。

どうすればこの問題を解決できますか？

jsfiddle

Answer 1

使用box-sizing: border-box;プロパティは、パディングとボーダーボックスの幅の内側を設定します。ここ

チェック以上のドキュメント：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>